老师，我的快进按钮在谷歌里回到开始位置了，还有seeked和seeking同步，没变化？？

来源：3-8 timeupdate、seeked、seeking

weixin_慕设计6449438

2019-06-03 15:38:11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video视频</title>
<style>
.container {
width:1200px;
height:150px;
margin:0 auto;
border:1px solid bisque;
}
button {
margin-left:15px;
margin-top:15px;
}

#myvideo{
width:800px;
height:500px;
margin-left:400px;
background:pink;
}
</style>
</head>
<body>
<div class="container">
<button id="btn1" value="开始">开始</button>
<button id="btn2" value="开始">暂停</button>
<button id="btn3" value="开始">video长度</button>
<button id="btn4" value="开始">当前video长度</button>
<button id="btn5" value="开始">视频来源</button>
<button id="btn6" value="开始">音量</button>
<button id="btn7" value="开始">静音</button>
<button id="btn8" value="开始">取消静音</button>
<button id="btn9" value="开始">video当前网络状态</button>
<button id="btn10" value="开始">video地址</button>
<button id="btn11" value="开始">video已经结束</button>
<button id="btn12" value="开始">快进</button>
<button id="btn13" value="开始">循环播放</button>
<button id="btn14" value="开始">播放快速度</button>
<button id="btn141" value="开始">播放慢速度</button>
<button id="btn15" value="开始">video当前就绪状态</button>
<button id="btn16" value="开始">video播放位置监听</button>
<button id="btn17" value="开始">进度条操作seek</button>
<button id="btn171" value="开始">进度条操作seeking</button>
<button id="btn18" value="开始">video音量更改</button>
<button id="btn19" value="开始">全屏</button>
</div>
<video src="./data/cp.mp4" id="myvideo" controls></video>

<script>
var VideoNode=document.getElementById('myvideo');

//播放
btn1.onclick=function(){
VideoNode.play(); //在谷歌浏览器下面不会自动播放哦！
};
//暂停
btn2.onclick=function(){
VideoNode.pause();
};
//video时长，
btn3.onclick=function(){
var min=parseInt(VideoNode.duration/60)+ "分"; //获取视频的分钟
var sec=parseInt(VideoNode.duration%60)+ "秒"; //获取视频的秒
alert("这个视频的长度是"+ min + sec);
};

//video当前播放的时长，
btn4.onclick=function(){
var min=parseInt(VideoNode.currentTime/60)+ "分"; //获取视频的分钟
var sec=parseInt(VideoNode.currentTime%60)+ "秒"; //获取视频的秒
alert("这个视频当前播放的长度是"+ min + sec);
};

//视频的来源
btn5.onclick=function(){
alert("视频来源地址是"+ VideoNode.src);
};

//视频音量控制
btn6.onclick=function(){
VideoNode.volume='0.9';
alert("视频的当前音量是"+VideoNode.volume);
};
//视频静音
btn7.onclick=function(){
VideoNode.muted=true; //返回的是布尔值，true表示静音哦！
};
btn8.onclick=function(){
VideoNode.muted=false; //返回的是布尔值，true表示静音哦！
};

//视频网络状态
btn9.onclick=function(){
alert(VideoNode.networkState)
}

//视频url(必须是播放状态哦)
btn10.onclick=function(){
alert("获取当前的视频地址是"+ VideoNode.currentSrc)
};

//判断视频是否结束，返回的是布尔值
btn11.onclick=function(){
alert( VideoNode.ended +"表示视频没有播放完毕") //false表示视频没有播放结束！
}
VideoNode.addEventListener("ended", function(){
alert("视频结束啦！谢谢观看！！")
});
//快进
VideoNode.currentTime=10; //设置全局的
btn12.onclick=function(){
VideoNode.currentTime=VideoNode.currentTime+3; //谷歌的没作用哦？
};

//循环播放
btn13.onclick=function(){
VideoNode.loop=true;
};

//加速播放
btn14.onclick=function(){
VideoNode.playbackRate=5;
};
//慢速播放
btn141.onclick=function(){
VideoNode.playbackRate=0.5;
};

//视频当前状态
btn15.onclick=function(){
alert(VideoNode.readyState);
};

//监听视频播放状态
//let是怎么用的呢？？
VideoNode.addEventListener('timeupdate', function(){
//let nowtime=parseInt(VideoNode.currentTime/60) + ':' + parseInt(VideoNode.currentTime%60);
//let totaltime=parseInt(VideoNode.duration/60) + ':' + parseInt(VideoNode.duration%60);
var totaltime=parseInt(VideoNode.duration/60) + ':' + parseInt(VideoNode.duration%60);
var nowtime=parseInt(VideoNode.currentTime/60) + ':' + parseInt(VideoNode.currentTime%60);
btn16.innerHTML=nowtime+ '/'+ totaltime;
});

//进度条
//问题是谷歌2个数据都是1，ie浏览器是同步的数据，看不出快慢？？？
var seekedNum = seekingNum = 0;
VideoNode.onseeked=function(){
seekedNum++;
btn17.innerHTML = seekedNum;
};
VideoNode.onseeking=function(){
seekingNum++;
btn171.innerHTML = seekingNum;
};

//音量更改
btn18.onclick=function(){
VideoNode.volume=Math.random();//随机生成的数据
}
VideoNode.onvolumechange = function(){
console.log('音量在变化哦！'); //每次改变，打印一下
};

//全屏
btn19.onclick=function(){
if(VideoNode.webkitRequestFullscreen){
VideoNode.webkitRequestFullscreen(); //谷歌浏览器
} else if(VideoNode.mozRequestFullScreen){
VideoNode.mozRequestFullScreen(); //火狐浏览器
} else{
VideoNode.msRequestFullscreen(); //IE浏览器
}
}
</script>
</body>
</html>