视频控制的简易进度条

Posted 2020-10-22 莫小龙

视频控制的简易进度条

样式：

作用：控制视频的播放点，实时显示视频播放位置

 

html：

<div class="coll">
            <span name="progress">
                <b></b>
                <b></b>
                <b></b>
            </span>
</div>

css：

.coll{position: absolute;bottom: 20px;left: 20px;width: 52%;}
    .coll span{display: block;height: 4px;width: 52%;margin-left: 2%;background-color: #505050;border-radius: 4px;margin-top: 11px;float:left;}
    .coll span b:nth-child(1){z-index:1;float:left;position:relative;width: 0%;background-color: #b4b4b4;display: block;height: 100%;border-radius: 4px;}
    .coll span b:nth-child(2){z-index:2;position:relative;float: left;width: 8px;height: 8px;background-color: white;border-radius: 8px;margin-top: -2px;margin-left: -8px;}
    .coll span b:nth-child(3){position: relative;background-color: white;display: block;height: 4px;border-radius: 4px;}

js：

 var initProgressBar = function(){        //进度条相关操作
        var main_div = $(".coll");
        var timeDrag = false;   /* Drag status */
        $("span[name=\'progress\']",main_div).mousedown(function(e) {     //进度条的按下操作
            timeDrag = true;
            updatebar(e.pageX);
        });
        $(document).mouseup(function(e) {               //松开
            if(timeDrag) {
                timeDrag = false;
                updatebar(e.pageX);
            }
        });
        $(document).mousemove(function(e) {  //鼠标移动事件
            if(timeDrag) {
                updatebar(e.pageX);
            }
        });


        var updatebar = function(x) {  //更新时间与播放条进度
            var progress = $("span[name=\'progress\']",main_div);
            var maxduration = video.duration; //Video duraiton 返回视频长度
            var position = x - progress.offset().left; //Click pos
            var percentage = 100 * position / progress.width();

            if(percentage > 100) {
                percentage = 100;
            }
            if(percentage < 0) {
                percentage = 0;
            }
            //   更新进度条和视频时间
            $("span b:eq(0)",main_div).css(\'width\', percentage+\'%\');
            video.currentTime = maxduration * percentage / 100;

        };

    };

    var initVideo = function(player){
        var main_div = $(".coll");

        video.ontimeupdate= function() {           //实时更新播放进度条和时间
            var currentPos = video.currentTime; //Get currenttime    //当前时间
            var maxduration = video.duration; //Get video duration   //总时间
            var percentage = 100 * currentPos / maxduration; //算出进度条此时的百分比
            $("span b:eq(0)",main_div).css("width",percentage+"%");
        };
        initProgressBar();
    };

使用注意事项：

1.$("span[name=\'progress\']",main_div) 中为父节点main_div中找子节点 span[name=\'progress\']，同时也限制方法的作用位置

2.video.ontimeupdate= function()   为video对象的方法，作用为实时返回视频对象当前的播放位置等参数。

3.该视频进度条的控制在tomcat中可正常使用，实测webstrom编辑打开时，火狐可正常使用，谷歌、搜狗进度条点击后视频播放位置置0。