这期内容当中小编将会给大家带来有关怎么在HTML5中自定义一个视频播放器，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站制作、网站设计、电商网站制作开发、小程序制作、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！
video对象
兼容性写法
您的浏览器不支持，请升级您的浏览器
video 标签 width height autoplay muted
poster带有预览图（海报图片）的视频播放器
选中video标签
var VideoNode = document.getElementById('myVideo');src控制视频的来源
VideoNode.src = 'data/demo.ogv';
手动设置控件 controls
VideoNode.controls = true;
设置视频音量
VideoNode.volume = 0.5;
currentTime当前播放时间
快进效果
gogogo.onclick = function(){
VideoNode.currentTime = VideoNode.currentTime + 3;
};暂停 pause()
stopNode.onclick = function(){
VideoNode.pause();
};播放play()
playNode.onclick = function(){
VideoNode.play();
};load 刷新播放器的事件
reloadNode.onclick = function(){
VideoNode.src = 'data/demo.mp4';
VideoNode.load();
};canplay 视频已经加载好 可以开始播放了
VideoNode.addEventListener('canplay',function(){
console.log('视频已经加载好 可以开始播放了');
});requestFullscreen 让video标签变成全屏
VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();
fullScreenNode.onclick = function(){
if(VideoNode.webkitRequestFullscreen){
VideoNode.webkitRequestFullscreen();
}
else if(VideoNode.mozRequestFullScreen){
VideoNode.mozRequestFullScreen();
}
};volumechange 当音量更改时
VideoNode.onvolumechange = function(){
console.log('volumechange');
};声音随机更改
volumeNode.onclick = function(){
VideoNode.volume = Math.random();
};seeking 当用户开始拖动进度条时 就会触发的事件
var seekingNum = 0;
VideoNode.onseeking = function(){
console.log('seeking...');
seekingNum++;
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;
自定义视频播放器
放图
*{margin: 0;padding: 0;list-style: none;}
.outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}
.outerNode .videoNode{
width: 540px;height: 305px;float: left;
background: black;
}
.outerNode .controlsNode{
width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(images/playNode.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(images/pause.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;}
.outerNode .controlsNode .loadNode .lineNode{
width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
background: url(images/line_bg.png) repeat-x;
}
.outerNode .controlsNode .loadNode .lineNode .lineRight{
width: 2px;height: 100%;position: absolute;right: 0;top: 0;
background: url(images/line_r_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadLeft{
height: 100%;width:3px ;position: absolute;left: 0;top: 0;
background: url(images/left_bg.png) no-repeat;z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight{
height: 100%;width:3px ;position: absolute;right: 0;top: 0;
background: url(images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}
.outerNode .controlsNode .timeNode{
float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outerNode .controlsNode .volumeNode{
width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
background: url(images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
background: url(images/volumeLine_bg.png) repeat-x;position: relative;
}
.outerNode .controlsNode .volumeLine .v_left{
width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;}
.outerNode .controlsNode .fullNode{
width:15px;height:17px;float: left;margin: 6px 0 0 35px;
background: url(images/full_bg.png) no-repeat;cursor: pointer;
transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
background: url(images/full_hover_bg.png) no-repeat;
}
