HTML5教程如何实现播放视频中暂停、关闭声音等操作-职坐标

HTML5教程如何实现播放视频中暂停、关闭声音等操作

沉沙 2018-08-22 来源：阅读 6104 评论 0

摘要：本篇教程探讨了HTML5教程如何实现播放视频中暂停、关闭声音等操作，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5教程如何实现播放视频中暂停、关闭声音等操作，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

<!DOCTYPE html>
<html>
   <head>
          <title>HTML5-video(播放暂停视频；打开关闭声音；进度条)</title>
          <meta charset="utf-8"/>
   </head>
<body>
<video id="video1" controls="controls" width="400px" height="400px">
    <source src="videos/demo.mp4">
</video>

<div>
    <button onclick="enableMute()" type="button">关闭声音</button>
    <button onclick="disableMute()" type="button">打开声音</button>
    <button onclick="playVid()" type="button">播放视频</button>
    <button onclick="pauseVid()" type="button">暂停视频</button>
    <button onclick="showFull()" type="button">全屏</button><br />
    <span>进度条:</span>
    <progress value="0" max="0" id="pro"></progress>
    <span>音量:</span>
    <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</div>

<script>
    var btn=document.getElementsByTagName("button");
    var myvideo=document.getElementById("video1");
    var pro=document.getElementById("pro");
    var ran=document.getElementById("ran");

    //关闭声音
    function enableMute(){
        myvideo.muted=true;
        btn[0].disabled=true;
        btn[1].disabled=false;
    }
    //打开声音
    function disableMute(){
        myvideo.muted=false;
        btn[0].disabled=false;
        btn[1].disabled=true;
    }
    //播放视频
    function playVid(){
        myvideo.play();
        setInterval(pro1,1000);
    }
    //暂停视频
    function pauseVid(){
        myvideo.pause();
    }
    //全屏
    function showFull(){
        myvideo.webkitrequestFullscreen();
    }
    //进度条展示
    function pro1(){
        pro.max=myvideo.duration;
        pro.value=myvideo.currentTime;
    }
    //拖动range进行调音量大小
    function setvalue(){
        myvideo.volume=ran.value/100;
        myvideo.muted=false;
    }
</script>

</body>
</html>