HTML5 VideoAPI，打造自己的Web视频播放器

　　6.播放进度条

//播放进度
video.ontimeupdate = function(){
    var currTime = this.currentTime,    //当前播放时间
    duration = this.duration;       // 视频总时长
    //百分比
    var pre = currTime / duration * 100 + "%";
    //显示进度条
    loaded.style.width = pre;
 
     //显示当前播放进度时间
    currPlayTime.innerHTML = getFormatTime(currTime);
};

　　这样就可以实时显示进度条了，此时，我们还需要点击进度条进行跳跃播放，即我们点击任意时间点视频跳转到当前时间点播放：

//跳跃播放
progress.onclick = function(e){
    var event = e  window.event;
    video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};

　　7.全屏显示

　　这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关：

//全屏
expand.onclick = function(){
     video.webkitRequestFullScreen();
};

　　经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。

原文链接：https://segmentfault.com/a/1190000006150560

原文作者：dunizb