html video隐藏进度条,HTML5实现video标签的自定义播放进度条

SEOut"(){

bindEvent(playBtn,"click"原生的JavaScript事件绑定函数

bindEvent(ele,eventName,func){if(window.addEventListener){

ele.addEventListener(eventName,func);

}else{

ele.attachEvent('on' +eventName,func);

}

}显示video的控制面板

showControls(){

videoControls.style.opacity= 1;

}隐藏video的控制面板

hideControls(){为了让控制面板一直出现，我把videoControls.style.opacity的值改为1

videoControls.style.opacity = 1控制video的播放

play(){if ( video.paused ||video.ended ){( video.ended ){

video.currentTime= 0;

}

video.play();

playBtn.innerHTML= "暂停";

progressFlag= setInterval(getProgress,60);

}{

video.pause();

playBtn.innerHTML= "播放";

clearInterval(progressFlag);

}

}控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下

fullScreen(){(fullScreenFlag){

videoContainer.webkitCancelFullScreen();

}{

videoContainer.webkitRequestFullscreen();

}

}video的播放条

getProgress(){var percent = video.currentTime /video.duration;

playProgress.style.width= percent * (progressWrap.offsetWidth) - 2 + "px";

showProgress.innerHTML= (percent * 100).toFixed(1) + "%"鼠标在播放条上点击时进行捕获并进行处理

videoSeek(e){if(video.paused ||video.ended){

play();

enhanceVideoSeek(e);

}{

enhanceVideoSeek(e);

}

}enhanceVideoSeek(e){

clearInterval(progressFlag);var length = e.pageX -progressWrap.offsetLeft;var percent = length /progressWrap.offsetWidth;

playProgress.style.width= percent * (progressWrap.offsetWidth) - 2 + "px";

video.currentTime= percent *video.duration;

progressFlag= setInterval(getProgress,1)">);

}

}(