H5 video标签相关属性操作示例

最新推荐文章于 2024-09-23 14:58:08 发布

灵左

最新推荐文章于 2024-09-23 14:58:08 发布

阅读量638

点赞数

分类专栏： JavaScript HTML+CSS 前端文章标签： H5标签

JavaScript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

HTML+CSS

3 篇文章 0 订阅

订阅专栏

HTML5-video(播放暂停视频；打开关闭声音；进度条)

<!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>