视频功能按钮
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var video = document.getElementsByTagName('video')[0];
var btns = document.getElementsByTagName('button');
btns = Array.prototype.slice.call(btns,0);
function handle(){
//区分每个button的功能
var value = this.innerText;
if(value=='播放'){
video.play();
return;
}
if(value=='暂停'){
video.pause();
return;
}
if(value=='快倍速'){
video.playbackRate = 20;
return;
}
if(value=='慢倍速'){
video.playbackRate = 0.2;
return;
}
if(value=='快进'){
video.currentTime += 5;
return;
}
if(value=='回退'){
video.currentTime -= 5;
return;
}
if(value=='时间'){
console.log(video.currentTime,video.duration);
}
}
btns.forEach(function(item,index){
//给每一个button绑定事件
item.onclick = handle;
});
btns[2].onclick = function(){
//video.paused，如果返回true，说明是暂停状态
if(video.paused){
video.play();
this.innerText = '暂停';
}else{
video.pause();
this.innerText = '播放';
}
}
//键盘左右键控制视频快进与回退
document.onkeydown = function(event){
if(event.keyCode==37){
//左
video.currentTime -=5;
}
if(event.keyCode==39){
//右
video.currentTime +=5;
}
//音量
if(event.keyCode==38){
//加音量 [0-1]
if(video.volume<0.9){
video.volume += 0.1;
}else{
video.volume = 1;
}
}
if(event.keyCode==40){
//减音量 [0-1]
if(video.volume>0.1){
video.volume -= 0.1;
}else{
video.volume = 0;
}
}
}
}
</script>
</head>
<body>
<video src="1.mp4"></video>
<div>
<button>播放</button>
<button>暂停</button>
<button>播放或暂停</button>
<button>快倍速</button>
<button>慢倍速</button>
<button>快进</button>
<button>回退</button>
<button>时间</button>
</div>
</body>
输出结果：