视屏标签

2019-03-03 19:49:33 作者：互联网
<!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>
标签：function,10,播放,标签,viode,onclick,btn,视屏
来源： https://blog.csdn.net/qq_44388393/article/details/88092580