vIDeo对象
兼容情况：
safari浏览器不支持webm格式
Chrome浏览器支持webm格式
ie8以及以下不支持vIDeo标签,IE9支持vIDeo标签,但是支持mp4格式的
firefox(火狐浏览器)支持ogv格式的视频
兼容性写法
<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 = (){ VIDeoNode.pause(); };播放play()
playNode.onclick = (){ VIDeoNode.play(); };load 刷新播放器的事件
reloadNode.onclick = (){ VIDeoNode.src = 'data/demo.mp4'; VIDeoNode.load(); };
canplay 视频已经加载好 可以开始播放了
VIDeoNode.addEventListener('canplay',(){ console.log('视频已经加载好 可以开始播放了'); });requestFullscreen 让vIDeo标签变成全屏
VIDeoNode.webkitRequestFullscreen();
VIDeoNode.mozRequestFullScreen();
fullScreenNode.onclick = (){ if(VIDeoNode.webkitRequestFullscreen){ VIDeoNode.webkitRequestFullscreen(); } else (VIDeoNode.mozRequestFullScreen){ VIDeoNode.mozRequestFullScreen(); } };
volumechange 当音量更改时
VIDeoNode.onvolumechange = (){ console.log('volumechange'); };
声音随机更改
volumeNode.onclick = (){ VIDeoNode.volume = Math.random(); };
seeking 当用户开始拖动进度条时 就会触发的事件
var seekingNum = 0; VIDeoNode.onseeking = (){ console.log('seeking...'); seekingNum++; seeking.INNERHTML = seekingNum; };
seeked 当用户对视频的进度条并且已经完成 *** 作时会触发的事件
var seekednum = 0; VIDeoNode.onseeked = (){ console.log('seeked...'); seekednum++; seeked.INNERHTML = seekednum; };
timeupdate监听视频播放的状态
VIDeoNode.addEventListener('timeupdate',128,1)">// 总时长，以分钟：秒的形式显示 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((){ console.log(VIDeoNode.readyState); },500);
playbackRate 查看或设置视频的一个播放速度
console.log(VIDeoNode.playbackRate)
Rate设置倍速
Rate设置0.5倍速 RateNode.children[0].onclick = (){ VIDeoNode.playbackRate = 0.5; }; Rate设置1倍速 RateNode.children[1].onclick = (){ VIDeoNode.playbackRate = 1Rate设置2倍速 RateNode.children[2].onclick = (){ VIDeoNode.playbackRate = 2; };
loop的设置
loopNode.onclick = if(VIDeoNode.loop == false){ this.INNERHTML = '循环'; VIDeoNode.loop = true; } else{ this.INNERHTML = '不循环'; } };
src返回的数据
console.log('src='+VIDeoNode.src);currentSrc返回的数据
console.log('currentSrc='+VIDeoNode.currentSrc);监听ended事件
VIDeoNode.addEventListener('ended',1)">(){ console.log('视频播放结束了'); VIDeoNode.play(); })查看视频的网络状态
console.log(VIDeoNode.networkState)
手动设置控件 controls
VIDeoNode.controls = true;手动设置静音 muted
VIDeoNode.muted = true;自定义视频播放器
放图
<!DOCTYPE HTML> <HTMLhead> Meta charset="utf-8"Title></style type="text/CSS">*{margin: 0;paddingList-style none} .outerNodewIDth 540pxheight 332pxposition absoluteleft 50%top -166px 0 0 -270pxBox-shadow 0 0 4px #5b606d .outerNode .vIDeoNode wIDth 305pxfloat left background black; .outerNode .controlsNode 27pxbackground url(images/ctrs_bg.gif) repeat-x.outerNode .controlsNode .playNode float 15px 17px 6px 0 0 14px url(images/playNode.png) no-repeatcursor pointer.outerNode .controlsNode .pauseNode url(images/pause.png) no-repeat.outerNode .controlsNode .loadNode 267px 10px 9px 0 0 14px url(images/load_bg.png) repeat-x relative.outerNode .controlsNode .loadNode .lineNode 0% 7px 1px url(images/line_bg.png) repeat-x;.outerNode .controlsNode .loadNode .lineNode .lineRight 2px 100%right url(images/line_r_bg.png) no-repeat.outerNode .controlsNode .loadNode .loadleft height3px url(images/left_bg.png) no-repeatz-index 4.outerNode .controlsNode .loadNode .loadRight url(images/right_bg.png) no-repeat.outerNode .controlsNode .loadNode .crlNode url(images/crl_bg.png) -8.5px -3.5px 5.outerNode .controlsNode .timeNode 75px 9px 0 0 9px.outerNode .controlsNode .timeNode spanFont-size10pxline-heightcolor white; .outerNode .controlsNode .volumeNode 16px 5px 0 0 6px url(images/volume_bg.png).outerNode .controlsNode .volumeline 8px 61px 10px 0 0 4px url(images/volumeline_bg.png) repeat-x; .outerNode .controlsNode .volumeline .v_left 3px100% url(images/v_left.png) no-repeat.outerNode .controlsNode .volumeline .v_right url(images/v_right.png) no-repeat.outerNode .controlsNode .volumeline .v_DragNode 13px 58.5px url(images/vo_d.png) no-repeat.outerNode .controlsNode .fullNode15px17px 6px 0 0 35px url(images/full_bg.png) no-repeat Transition 0.7s.outerNode .controlsNode .fullNode:hover url(images/full_hover_bg.png) no-repeat} </style>>body> <!-- 最外层的元素 --> div class='outerNode'> vIDeo元素 --> vIDeo ='vIDeoNode' src='data/imooc.mp4' poster="data/poster.jpg"vIDeo 控制器的元素 ='controlsNode'> 控制播放暂停的按钮 --> ='playNode'div vIDeo的进度条 ='loadNode'> ='loadleft'='loadRight' 拖动进度条的按钮 --> ='crlNode' 真正的进度条 ='lineNode'> ='lineRight' 时间的元素 ='timeNode'span ='Now'>00:00span> - ='all'>4:30 声音的标志 ='volumeNode' 声音的条 ='volumeline'='v_left'='v_right'='v_DragNode' 全屏的按钮 ='fullNode'script ="text/JavaScript"> //播放暂停的控制 PlayNode 播放器按钮 VIDeoNode 播放器 PlayBln 控制暂停播放的布尔值 FullNode 全屏按钮 NowNode 当前时间 allNode 视频的全部时间 lineNode 当前的进度条 CrlNode 进度条按钮 LoadNode 进度条外面的元素 var PlayNode = document.getElementsByClassname('playNode)[0],VIDeoNode vIDeoNode document.querySelector(.fullNode),NowNode .Now.all.lineNode.crlNode.loadNode.v_DragNode= true; 播放、暂停的事件 PlayNode.onclick function(){ 传统的通过布尔值去改变classname的方法 PlayBln !PlayBln; if(PlayBln == false){ this.classname pauseNode; VIDeoNode.play(); } else{ ; VIDeoNode.pause(); } }; 全屏按钮的事件 FullNode.onclick (VIDeoNode.webkitRequestFullscreen){ VIDeoNode.webkitRequestFullscreen(); } else (VIDeoNode.mozRequestFullScreen){ VIDeoNode.mozRequestFullScreen(); } { VIDeoNode.requestFullscreen(); } }; 解决最开始时间的NAN的问题 VIDeoNode.addEventListener(canplay, needTime parseInt(VIDeoNode.duration); s needTime%60; m parseInt(needTime / ); timeNum todou(m)+todou(s); allNode.INNERHTML timeNum; },1)">); 解决 时间不足10 的问题 todou(time){ return time<10?time:time; } 当视频播放的时候 需要当前的时间动起来timeupdate目前的 百分比进度 lineNode.style.wIDth VIDeoNode.currentTime/VIDeoNode.duration*100+'%'; CrlNode.style.left lineNode.offsetWIDth - 8.5 + px' parseInt(VIDeoNode.currentTime); todou(s); NowNode.INNERHTML 声音的拖拽按钮 VDragNode.onmousedown (e){ ev e || event; l ev.clIEntX .offsetleft; document.onmousemove (e){ event; needX - l; maxX VDragNode.parentNode.offsetWIDth 2.5; needX < 2.5 ? : needX; needX maxX : needX; 计算0 - 1 lastVolume (VDragNode.offsetleft 2) VDragNode.parentNode.offsetWIDth ; VIDeoNode.volume 0 : lastVolume; VDragNode.style.left ; }; document.onmouseup (e){ document.onmousemove document.onmouseup null; } return ; } 拖拽进度条按钮 CrlNode.onmousedown .offsetleft; VIDeoNode.pause(); document.onmousemove LoadNode.offsetWIDth 8.5 maxX : needX; CrlNode.style.left ; lineNode.style.wIDth (CrlNode.offsetleft9)LoadNode.offsetWIDth*100 + '%'; }; document.onmouseup (){ document.onmousemove ; VIDeoNode.currentTime VIDeoNode.duration *LoadNode.offsetWIDth; ){ console.log(1); PlayNode.classname ; VIDeoNode.play(); } { console.log(2);; VIDeoNode.pause(); } }; ; };script>总结
以上是内存溢出为你收集整理的HTML5视频（自定义视频播放器源码）全部内容，希望文章能够帮你解决HTML5视频（自定义视频播放器源码）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）