HTML5自定义视频播放器源码html5视频媒体标签video的使用方法及完整参数说明详解Html5实现首页动态视频背景的示例代码HTML5实现视频弹幕功能HTML5 视频播放(video),JavaScript控制视频的实例代码HTML5视频播放插件 video.js介绍

 var VideoNode = document.getElementById('myVideo');

 VideoNode.src = 'data/demo.ogv';

 VideoNode.controls = true;

 VideoNode.volume = 0.5;

 gogogo.onclick = function(){ VideoNode.currentTime = VideoNode.currentTime + 3; };

 stopNode.onclick = function(){ VideoNode.pause(); };

 playNode.onclick = function(){ VideoNode.play(); };

 reloadNode.onclick = function(){ VideoNode.src = 'data/demo.mp4'; VideoNode.load(); };

 VideoNode.addEventListener('canplay',function(){ console.log('视频已经加载好 可以开始播放了'); });

 VideoNode.webkitRequestFullscreen(); VideoNode.mozRequestFullScreen(); fullScreenNode.onclick = function(){ if(VideoNode.webkitRequestFullscreen){ VideoNode.webkitRequestFullscreen(); } else if(VideoNode.mozRequestFullScreen){ VideoNode.mozRequestFullScreen(); } }; 

 VideoNode.onvolumechange = function(){ console.log('volumechange'); };

 volumeNode.onclick = function(){ VideoNode.volume = Math.random(); };

 var seekingNum = 0; VideoNode.onseeking = function(){ console.log('seeking...'); seekingNum++; seeking.innerHTML = seekingNum; }; 

 var seekedNum = 0; VideoNode.onseeked = function(){ console.log('seeked...'); seekedNum++; seeked.innerHTML = seekedNum; };

 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; })

 console.log(VideoNode.readyState); setTimeout(function(){ console.log(VideoNode.readyState); },500);

 console.log(VideoNode.playbackRate) 

 //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; }; 

 loopNode.onclick = function(){ if(VideoNode.loop == false){ this.innerHTML = '循环'; VideoNode.loop = true; } else{ this.innerHTML = '不循环'; VideoNode.loop = false; } }; 

 VideoNode.addEventListener('ended',function(){ console.log('视频播放结束了'); VideoNode.play(); }) 

00:00 - 4:30