<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video src="videos/1.mp4" controls autoplay></video>
<br>
<button>播放</button>
<button>暂停</button>
<button>快进10秒</button>
<button>后退10秒</button>
<button>快速播放</button>
<button>减速播放</button>
<button>加大音量</button>
<button>减少音量</button>
<button>静音</button>
<button>全屏</button>
<script>
var viode = document.querySelector("video")
var btn = document.getElementsByTagName("button")
//1.播放
btn[0].onclick = function () {
viode.play();
}
//暂停
btn[1].onclick = function () {
viode.pause();
}
//快进10秒
btn[2].onclick = function () {
viode.currentTime += 10;
}
//后退10秒
btn[3].onclick = function () {
viode.currentTime -= 10;
}
//快速播放
btn[4].onclick = function () {
viode.playbackRate = 2;
}
//减速播放
btn[5].onclick = function () {
viode.playbackRate = 1 / 3;
}
//加大音量
btn[6].onclick = function () {
if (viode.volume >= 1) {
viode.volume = 1;
} else {
viode.volume += 0.1;
}
}
//减少音量
btn[7].onclick = function () {
if (viode.volume <= 0) {
viode.volume = 0;
} else {
viode.volume -= 0.1;
}
}
//静音
btn[8].onclick=function () {
if (viode.muted){
viode.muted=false;
} else{
viode.muted=true;
}
}
//全屏 在js中也有私有前缀:但是用驼峰命名法来写 webkitRequestFullscreen()
btn[9].onclick=function () {
viode.webkitRequestFullscreen();
}
</script>
</body>
</html>
视屏标签
猜你喜欢
转载自blog.csdn.net/qq_44388393/article/details/88092580
今日推荐
周排行