【OCR+WebLabelSoft】项目打卡之视频进度条跳转

熊就要有个熊样，既然是网页端视频模拟播放，那进度条自然必不可少
web演示：

1.进度条

1.1 html部分
咱先来画一个进度条

<div class="progress" style="display:none;height: 10px;" >  {# 这是包裹进度条的外层全白静止的 #}
    <div class="progress-bar progress-bar-striped active" >  {# 内层的才是进度条，可更新#}
    </div>
</div>

progress是包裹层
progress-bar才是真正的进度条（蓝色部分

1.2 JS部分
进度条你得学会长大
措施：点击progress部分，监听其相对位置，赋值progress-bar的width方可

$(".progress").click(function (e) {
    var currentRatio = e.offsetX / this.offsetWidth;
    console.log("/", this.offsetWidth);
    console.log("相对位置", currentRatio*100, "%");
    $(".progress-bar").css("width", currentRatio*100 + '%');  //注意得转化为百分数
    $("#myVideo")[0].currentTime = $("#myVideo")[0].duration*currentRatio;
    getStripFrame(); //自定义跳转到视频对应位置函数
}

function getStripFrame() {
    var currentTime = $("#myVideo")[0].currentTime; // 检测当前的播放时间
    globalFrame = Math.round(currentTime / globalFrameTime);
    if(globalFrame===0) {
        $(".progress-bar").css("width",0+'%'); //归0处理
        $("#myVideo")[0].currentTime = 0;
    }else{
        $("#myVideo")[0].currentTime = (globalFrame + 0.25) * globalFrameTime; //利用帧间隔时显示前一帧，减少缓冲影像提高鲁棒
    }
    $(".current-time").text($("#myVideo")[0].currentTime.toFixed(2)); //固化两个小数点
    console.log("跳帧", globalFrame,"时间戳",$("#myVideo")[0].currentTime);
    // currentFrameData(); //放在video的seek事件中，帧加载完毕再回复
}    

好了，此刻视频已经可以随你一起摇摆了

2.位置提示

在点击进度条前，时常会陷入迷茫，我在进度条的哪里，对应视频的何处
思路：在进度条上移动时显示提示框，移出则隐藏

2.1 html部分

<div class="move">0:00</div>

别惊奇，就是这简简单单的一行，欠的都在css部分还了
2.2 css部分

.move { /*鼠标移动信息提示框*/
    height: 10px;
    width: 30px;
    background: red;
    position: absolute;
    left: 0px;
    bottom: 30px;
    display: none;
    z-index: 300;
}

2.3 js部分

$(".progress").mousemove(function (e) {
    var locationTime = 0;
    var currentRatio = e.offsetX / this.offsetWidth;
    locationTime = $("#myVideo")[0].duration*currentRatio; // 检测当前鼠标位置时间
    globalFrame = Math.round(locationTime/ globalFrameTime);
    if(globalFrame!==0) {
        locationTime = (globalFrame + 0.25) * globalFrameTime;
        if(locationTime>$("#myVideo")[0].duration){  //$(".duration").text()这个是字符串怎么能和数值比较大小
            locationTime = $("#myVideo")[0].duration;
        }
    }else{
        locationTime = 0;
    }
    $(".move").text(locationTime.toFixed(2));
    $(".move").css({"left": e.offsetX + 5 + "px", "display": "block"}); //偏移了5px要不提示框在移动时闪
}).mouseout(function () {
    $(".move").css({"display": "none"});
});

3.播停图标

之前的播放停止只是一个按钮，跟我们平时见到的不一样，要是你初次见到可能会诧异这是啥
思路：改变风格即可

3.1 html部分

   <div id="PlayPause" class="play-btn ctrl-btn">
        <span class="glyphicon glyphicon-play" aria-hidden="true">
        </span>
    </div>

3.2 css部分

.ctrl-btn{
    display:inline-block;
    height:100%;
    float:left;
    width:auto
}
.play-btn{
    width:30px;
    height:100%;
    background-color:#1e90ff;
    color:#fff;
    text-align:center;
    cursor:pointer
}
.play-btn:hover{
    background-color:#222
}

3.3 js部分

$("#PlayPause").click(function () {
    if ($("#myVideo")[0].paused){
        $("#myVideo")[0].play();
        $(" .play-btn span").removeClass("glyphicon-play").addClass("glyphicon-pause");
    } else{
        $("#myVideo")[0].pause();
        $(" .play-btn span").removeClass("glyphicon-pause").addClass("glyphicon-play");
    }
});