![html5播放倍速 [html5]html5倍速播放功能源代码实例](https://600zi.400zi.cn/uploadfile/img/16/23/4fe81352dc6f50ad234fbe34ae61f5cb.jpg)
varmyVideo=document.getElementById("video");//播放器
varcoolPlay=document.getElementById("cool-play");
varcPlay=document.getElementById("c-play");//播放按钮
varcProgress=document.getElementById("c-progress");
varcPlayed=document.getElementById("c-played");//已经播放过的进度条
varcDrag=document.getElementById("c-drag");//进度条顶端的圆钮
varcCurrentTime=document.getElementById("c-currentTime");//当前时间span
varcTotalTime=document.getElementById("c-totalTime");//总时间
varloading=document.getElementsByClassName("icon-c-loading");//loading旋转图标
varrefresh=document.getElementsByClassName("icon-c-refresh");//重新加载按钮
varvoice=document.getElementsByClassName("i-voice");//音量按钮
varvoice_mask=document.getElementsByClassName("voice-mask");//音量总进度条
varvoice_bared=document.getElementsByClassName("voice-bared");//现在的音量的进度条
varvoice_dot=document.getElementsByClassName("voice-dot");
varvoice_num=0.8;//初始化当前的音量
volume(voice_num);//把音量初始化到80
functionvolume(n){
myVideo.volume=n;
voice_bared[0].style.height=n*100+'px';
}
functionplayPause(){
if(myVideo.paused){
Play();
}else{
Pause();
}
};
functionPlay(){
cPlay.className="icon-c-pause";
myVideo.play();
}
functionPause(){
cPlay.className="icon-c-play";
myVideo.pause();
}
refresh[0].οnclick=function(){
Load();
}
functionLoad(){
Pause();
myVideo.load();
cPlayed.style.width=0+"%";
cDrag.style.display="none";
cCurrentTime.innerHTML="00:00";
cTotalTime.innerHTML="00:00";
}
//播放时间及进度条控制
myVideo.οntimeupdate=function(){
varcurrTime=this.currentTime,//当前播放时间
duration=this.duration;//视频总时长
if(currTime==duration){
Pause();
}
//百分比
varpre=currTime/duration*100+"%";
//显示进度条
cPlayed.style.width=pre;
varprogressWidth=cProgress.offsetWidth;
varleftWidth=progressWidth*(currTime/duration);
if(leftWidth>8&&(progressWidth-leftWidth)>4){
cDrag.style.display="block";
}else{
cDrag.style.display="none";
}
cDrag.style.left=progressWidth*(currTime/duration)-4+"px";
//显示当前播放进度时间
cCurrentTime.innerHTML=getFormatTime(currTime,duration);
cTotalTime.innerHTML=getFormatTime(duration,duration);
};
//当浏览器可在不因缓冲而停顿的情况下进行播放时
myVideo.oncanplaythrough=function(){
loading[0].style.display="none";
}
//当视频由于需要缓冲下一帧而停止
myVideo.οnwaiting=function(){
loading[0].style.display="block";
}
//当用户开始移动/跳跃到音频/视频中的新位置时
myVideo.οnseeking=function(){
if(myVideo.readyState==0||myVideo.readyState==1){
loading[0].style.display="block";
}
}
//拖拽进度条上的园钮实现跳跃播放
/*cDrag.οnmοusedοwn=function(e){
if(cPlay.className=='icon-c-pause')
myVideo.pause();
loading[0].style.display="block";
document.οnmοusemοve=function(e){
console.log("e.clientX:"+e.clientX);
console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft);
varleftV=e.clientX-coolPlay.offsetLeft;
console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft);
console.log("leftV:"+leftV);
if(leftV<=0){
leftV=0;
}
if(leftV>=coolPlay.offsetWidth){
leftV=coolPlay.offsetWidth-10;
}
cDrag.style.left=leftV+"px";
//console.log(leftV);
}
document.οnmοuseup=function(){
varscales=cDrag.offsetLeft/cProgress.offsetWidth;
vardu=myVideo.duration*scales;
console.log("scales:"+scales);
console.log("du:"+du);
myVideo.currentTime=du;
if(cPlay.className=='icon-c-pause')
myVideo.play();
document.οnmοusemοve=null;
document.οnmοusedοwn=null;
}
}*/
//在进度条上点击跳跃播放
cProgress.οnclick=function(e){
vareevent=e||window.event;
console.log("当前点击的位置为："+(event.offsetX/this.offsetWidth)*myVideo.duration);
myVideo.currentTime=(event.offsetX/this.offsetWidth)*myVideo.duration;
};
//根据duration总长度返回00或00:00或00:00:00三种格式
functiongetFormatTime(time,duration){
vartimetime=time||0;
varh=parseInt(time/3600),
m=parseInt(time%3600/60),
s=parseInt(time%60);
ss=s<10?"0"+s:s;
if(duration>=60&&duration<3600){
mm=m<10?"0"+m:m;
returnm+":"+s;
}
if(duration>=3600){
mm=m<10?"0"+m:m;
hh=h<10?"0"+h:h;
returnh+":"+m+":"+s;
}
returns;
}
//音量的控制部分
//点击声音按钮时，把视频静音
voice[0].οnclick=function(){
if(myVideo.muted){
voice[0].className="i-voiceicon-c-voice";
myVideo.muted=false;
if(voice_num>=0&&voice_num<=1){
volume(voice_num);
}else{
volume(0.8);
}
}else{
voice_num=myVideo.volume;//记录下来静音前的音量
voice[0].className='i-voiceicon-c-mute';
myVideo.muted=true;
volume(0);
}
}
//当点击进度条上的一个位置时，变化音量
voice_mask[0].οnclick=function(e){
vareevent=e||window.event;
if(event.offsetY>=100){
voice[0].className='i-voiceicon-c-mute';
myVideo.muted=true;
volume(0);
return;
}
volume((100-event.offsetY)/100);
};
/*voice_mask[0].οnmοusedοwn=function(e){
document.οnmοusemοve=function(e){
console.log("e.clientY:"+e.clientY);
console.log("e.offsetY:"+e.offsetY);
console.log(e);
console.log(voice[0].offsetTop);
console.log(document.getElementsByClassName("voice")[0]);
volume((100-e.offsetY)/100);
if(event.offsetY==100){
voice[0].className='i-voiceicon-c-mute';
myVideo.muted=true;
volume(0);
}
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοusedοwn=null;
}
}*/
//全屏的控制部分
varfullscreen=document.getElementById('cool-fullScreen');
varFullScreenTF=true;
functionlaunchFullscreen(element){
//此方法不能在异步中进行，否则火狐中不能全屏操作
if(element.requestFullscreen){
element.requestFullscreen();
}elseif(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}elseif(element.msRequestFullscreen){
element.msRequestFullscreen();
}elseif(element.oRequestFullscreen){
element.oRequestFullscreen();
}elseif(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}else{
alert("您的浏览器版本太低，不支持全屏功能！");
}
FullScreenTF=false;
};
//退出全屏
functionexitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}elseif(document.msExitFullscreen){
document.msExitFullscreen();
}elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}elseif(document.oRequestFullscreen){
document.oCancelFullScreen();
}elseif(document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
alert("您的浏览器版本太低，不支持全屏功能！");
}
FullScreenTF=true;
};
fullscreen.οnclick=function(){
if(FullScreenTF){
launchFullscreen(coolPlay);
fullscreen.className="icon-c-shrink";
}else{
exitFullscreen();
fullscreen.className="icon-c-enlarge";
}
};
