视频播放进度条_视频进度条预告-CSDN博客

本文链接：https://blog.csdn.net/qq_38895889/article/details/82150817
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>视频播放进度条</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #med{
                margin: 10px 0 0 10px;
            }
            #btno{
                width: 20px;
                height: 20px;
                background-color: #fff;
                font-weight: bold;
                border: none;
                margin-left: 10px;
            }
            #btno,#bar{
                float: left;
            }
            #bar{
                width: 500px;
                height: 2px;
                background-color: #999;
                margin: 8px 0 0 10px;
            }
            #pro{
                width: 5px;
                height: 2px;
                background-color: #000;
                position: relative;
            }
            #nav{
                width:10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                top: -4px;
                right: 0;
                background-color: #ff0036;
            }

        </style>
    </head>
    <body>
        <video id="med" poster="video/oceans-clip.png">
            <!--处理兼容-->
            <source src="video/oceans-clip.mp4" type="video/mp4"></source>
            <source src="video/oceans-clip.ogg" type="video/ogg"></source>
            <source src="video/oceans-clip.webm" type="video/webm"></source>
        </video>
        <div id="box">
            <div id="btn">
                <button id="btno">▶</button>
            </div>
            <div id="bar">
                <div id="pro">
                    <div id="nav"></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //获取html中的id
            var med=document.getElementById("med");
            var btno=document.getElementById("btno");
            var pro=document.getElementById("pro");
            var nav=document.getElementById("nav");
            //定义定时器，占位符
            var timer=null;
            //点击按钮时开始，暂停播放
            btno.onclick=function(){
                if(med.paused){
                    med.play();
                    btno.innerHTML="||";
                    timer=setInterval(fun,1);

                }else{
                    med.pause();
                    btno.innerHTML="▶";
                    clearInterval(timer);
                }

            }
            var width=500;
            //设置进度条随着当前播放时间所占的长度而变化
            function fun(){
                if(!med.ended){
                    var mywidth=(med.currentTime/med.duration)*width;
                    pro.style.width=mywidth+"px";
                }else{
                    btno.innerHTML="▶";
                    clearInterval(timer);
                }
            }
        </script>
    </body>
</html>