<!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>
視屏標籤
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Jquery 導航欄
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"