視頻控制的簡易進度條

視頻控制的簡易進度條

樣式：

做用：控制視頻的播放點，實時顯示視頻播放位置

 

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。