米云影视html5播放器,网页制作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 nowTi