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;

}

//播放暂停的控制

//PlayNode 播放器按钮

//VideoNode 播放器

//PlayBln 控制暂停播放的布尔值

//FullNode 全屏按钮

//nowNode 当前时间

//allNode 视频的全部时间

//LineNode 当前的进度条

//CrlNode 进度条按钮

//LoadNode 进度条外面的元素

var PlayNode = document.getElementsByClassName('playNode')[0],

VideoNode = document.getElementsByClassName('videoNode')[0],

FullNode = document.querySelector('.fullNode'),

nowNode = document.querySelector('.now'),

allNode = document.querySelector('.all'),

LineNode = document.querySelector('.lineNode'),

CrlNode = document.querySelector('.crlNode'),

LoadNode = document.querySelector('.loadNode'),

VDragNode = document.querySelector('.v_DragNode'),

PlayBln = true;

//播放、暂停的事件

PlayNode.onclick = function(){

//传统的通过布尔值去改变classname的方法

PlayBln = !PlayBln;

if(PlayBln == false){

this.className = 'pauseNode';

VideoNode.play();

}

else{

this.className = 'playNode';

VideoNode.pause();

}

};

//全屏按钮的事件

FullNode.onclick = function(){

if(VideoNode.webkitRequestFullscreen){

VideoNode.webkitRequestFullscreen();

}

else if(VideoNode.mozRequestFullScreen){

VideoNode.mozRequestFullScreen();

}

else{

VideoNode.requestFullscreen();

}

};

//解决最开始时间的NAN的问题

VideoNode.addEventListener('canplay',function(){

var needTime = parseInt(VideoNode.duration);

var s = needTime%60;

var m = parseInt(needTime / 60);

var timeNum = toDou(m)+':'+toDou(s);

allNode.innerHTML = timeNum;

},false);

//解决 时间不足10 的问题

function toDou(time){

return time<10?'0'+time:time;

}

//当视频播放的时候 需要当前的时间动起来

VideoNode.addEventListener('timeupdate',function(){

//目前的 百分比进度

LineNode.style.width = VideoNode.currentTime/VideoNode.duration*100+'%';

CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

var needTime = parseInt(VideoNode.currentTime);

var s = needTime%60;

var m = parseInt(needTime / 60);

var timeNum = toDou(m)+':'+toDou(s);

nowNode.innerHTML = timeNum;

},false);

//声音的拖拽按钮

VDragNode.onmousedown = function(e){

var ev = e || event;

var l = ev.clientX - this.offsetLeft;

document.onmousemove = function(e){

var ev = e || event;

var needX = ev.clientX - l;

var maxX = VDragNode.parentNode.offsetWidth - 2.5;

needX = needX < -2.5 ? - 2.5 : needX;

needX = needX > maxX ? maxX : needX;

//计算0 - 1

var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ;

VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;

VDragNode.style.left = needX + 'px';

};

document.onmouseup = function(e){

document.onmousemove = document.onmouseup = null;

}

return false;

}

//拖拽进度条按钮

CrlNode.onmousedown = function(e){

var ev = e || event;

var l = ev.clientX - this.offsetLeft;

VideoNode.pause();

document.onmousemove = function(e){

var ev = e || event;

var needX = ev.clientX - l;

var maxX = LoadNode.offsetWidth - 8.5;

needX = needX < -8.5 ? -8.5 : needX;

needX = needX > maxX ? maxX : needX;

CrlNode.style.left = needX + 'px';

LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%';

};

document.onmouseup = function(){

document.onmousemove = document.onmouseup = null;

VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth;

if(PlayBln == false){

//console.log(1);

PlayNode.className = 'pauseNode';

VideoNode.play();

}

else{

//console.log(2);

PlayNode.className = 'playNode';

VideoNode.pause();

}

};

return false;

};

总结

以上所述是小编给大家介绍的HTML5自定义视频播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对米云问答网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！