HTML5自定义视频播放器源码

video对象

兼容性写法

<video controls>
<source src="data/demo.ovg">
<source src="data/demo.mp4">
<source src="data/demo.webm">
您的浏览器不支持，请升级您的浏览器
</video>

video 标签 width height autoplay muted

poster带有预览图（海报图片）的视频播放器

<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>

选中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++;								 
 1/6    1 2 3 4 5 6 下一页 尾页