seeking.innerHTML = seekingNum;
};
seeked 当用户对视频的进度条并且已经完成操作时会触发的事件
var seekedNum = 0;
VideoNode.onseeked = function(){
console.log('seeked...');
seekedNum++;
seeked.innerHTML = seekedNum;
};timeupdate监听视频播放的状态
VideoNode.addEventListener('timeupdate',function(){
// 总时长，以分钟：秒的形式显示
let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
// 当前时间，以分钟：秒的形式显示
let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
timeNode.innerHTML = nowTime+'/'+allTime;
})readyState 视频的准备信息
console.log(VideoNode.readyState);
setTimeout(function(){
console.log(VideoNode.readyState);
},500);playbackRate 查看或设置视频的一个播放速度
console.log(VideoNode.playbackRate)
Rate设置倍速
//Rate设置0.5倍速
RateNode.children[0].onclick = function(){
VideoNode.playbackRate = 0.5;
};
//Rate设置1倍速
RateNode.children[1].onclick = function(){
VideoNode.playbackRate = 1;
};
//Rate设置2倍速
RateNode.children[2].onclick = function(){
VideoNode.playbackRate = 2;
};
loop的设置
loopNode.onclick = function(){
if(VideoNode.loop == false){
this.innerHTML = '循环';
VideoNode.loop = true;
}
else{
this.innerHTML = '不循环';
VideoNode.loop = false;
}
};
src返回的数据
console.log('src='+VideoNode.src);currentSrc返回的数据
console.log('currentSrc='+VideoNode.currentSrc);监听ended事件
VideoNode.addEventListener('ended',function(){
console.log('视频播放结束了');
VideoNode.play();
})
查看视频的网络状态
console.log(VideoNode.networkState)手动设置控件 controls
VideoNode.controls = true;手动设置静音 muted
VideoNode.muted = true;自定义视频播放器
放图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
