初试 HTML5 vdeo
浏览数：15 /
时间：2015年06月09日
第一次使用js控制html5 video：
HTML：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>HTML5播放器</title> <link rel="stylesheet" href="HTML5Player.css"/> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="playerWrap"> <video id="player" width="680" height="400" controls="controls"> <source src="wild.webm" type="video/webm"> 浏览器不支持 </video> <p>当前播放时长：<span class="currentTime" id="second"></span> 实际观看时长：<span class="cout"></span> 当前日期时间：<span id="demo"></span> </p> <p> 当前进度条共向前推进了：<span class="mfront">0</span>秒 当前进度条共向后推进了：<span class="mback">0</span>秒 </p> <p> 上次观看的时长：<span class="visited">0</span> <button class="playerAgain">从新播放</button> </p> <p>当前播放的路径：<span class="srcName"></span></p> </div> <script src="HTML5Player.js"></script> </body> </html>
css:
.playerWrap{ width: 100%; margin:0 auto; text-align: center; } video{ margin:0 auto; background-color: black; } .currentTime, .cout, #demo{ font-weight: bold; }
js：（这是重点）
$(function(){ //属性 var TimeDom = $(".currentTime"), playerSecond = document.getElementById("player"), CountT = $(".cout"), playAgainDom = $(".playerAgain"), frontDom = $(".mfront"), backDom = $(".mback"), visitedDom = $(".visited"), srcName = $(".srcName"), pid = 0;//区别不同视频 playedTime = 0,//当前已播放的时间范围范围 movetime = 0,//移动进度后的某时刻 CRtime = 0, //移动前的时刻 Movefront = 0,//向前拖动进度的时长 MoveBack = 0,//向后拖动进度的时长 moveState = 0;//判断播放进度是否被拖动，0为正常播放，1为进度条被拖动 /****************************************************************************/ /* *当观看进度条拖动时，获取正确观看总时长 */ playerSecond.onseeking = function(){ moveState = 1; movetime =parseInt(playerSecond.currentTime);//移动后的时刻 CRtime = parseInt(TimeDom.text());//移动前的时刻 if(movetime > CRtime){ Movefront += movetime-CRtime; //获取向前拖动的时间 }else{ MoveBack += CRtime-movetime; //获取向后拖动的时间 } if(isNaN(Movefront)) Movefront = 0; if(isNaN(MoveBack)) //若上次未观看完毕,下次播放时从上次位置重新播放 MoveBack = 0; //会触发onseeking事件,MoveBack 的值可能为NaN frontDom.text(""+Movefront); backDom.text(""+ MoveBack); //alert("Movefront:"+ Movefront+" "+"MoveBack:"+MoveBack); }; /* *function getMoveTime() *获取观看视频时,人为向前拉动进度的总时长 Movefront *获取观看视频时,人为向后拉动进度的总时长 MoveBack *返回两参数：Movefront,MoveBack */ function getMoveTime(){ return {"Movefront":Movefront,"MoveBack":MoveBack}; } /*********************************************************************************/ /* *GetTime() *为页面添加数据 *每间隔一秒更新所取得的当前时长，和观看时长 */ function GetTime(){ TimeDom.text(""+playerSecond.currentTime); //记录当前播放时长 CountT.text(""+getRealPlayTime()+"秒");//记录计时器内容 getLocalTime();//获取当地时间 srcName.text(playerSecond.currentSrc); setTimeout(GetTime,1000); } /******************************/ /**************main***************/ window.onload = function(){ var t = setTimeout(GetTime,2000); //加载后2s运行GetTime函数 getVisitedTime();//获取上次播放时长终点 PlayAgain(); //重新播放 } /*********************************************************/ /* *function getRealPlayTime() *获取真实视频播放时长 */ var addTime = 0, myVar = ‘‘; function getRealPlayTime(){ playerSecond.onplay = function(time){ myVar=setInterval(function(){myTimer()},1000); }//播放开始时计算时间 playerSecond.onpause = function(){ myStopFunction(); }//停止播放计算时间 playerSecond.onended = function(){ myStopFunction(); } /***/ function myTimer(){ addTime++; }//开始计时 function myStopFunction(){ clearInterval(myVar); }//暂停计时 return addTime; } /*********************************/ /* *function getLocalTime() *获取本地时间 */ function getLocalTime(){ var d=new Date(); //var t=d.toLocaleDateString();//获取当前日期 var t=d.toLocaleString();//获取当前时间与日期 document.getElementById("demo").innerHTML = t; } /*********************************/ /* *function getVisitedTime() *记录上次未看完的时刻 */ function getVisitedTime(){ var visitedTime = 0; playerSecond.onabort = recordTime; playerSecond.onemptied = recordTime; playerSecond.onerror = recordTime; window.onunload = function(){ //关闭页面时，还没播放完 if((playerSecond.duration - playerSecond.currentTime)>1) recordTime(); } // playerSecond.onpause = recordTime; /**/ function recordTime(){ visitedTime = playerSecond.currentTime; setCookie("visitedTime",visitedTime); } /**/ if(getCookie("visitedTime")){ visitedTime = getCookie("visitedTime") playerSecond.currentTime = visitedTime; } visitedDom.text(visitedTime); } /***************/ function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } /***/ function getCookie(name){ var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return (arr[2]); else return null; } /*********************************/ /* *function PlayAgain() *重新播放一次 */ function PlayAgain(){ playAgainDom.bind("click",function(){ playerSecond.currentTime = 0; }); } /*********************************/ /* *function playNextVideo() *播放下一视频 */ function playNextVideo(){ } /*****************************/ //function creatPid() //返回pid, //用于区别不同的视频，每个视频拥有一个独一无二的pid function creatPid(){ var $Date = new Date(); var $time = $Date.getTime()+""; var randnum =parseInt(Math.random()*800000+100000)+""; return ($time+randnum); } /****************************/ /*********************************/ }); /*************************/
效果图：
总结：利用了播放器的currentSrc属性获取当前播放的文件路径，currentTime属性获取当前播放的时长和设置播放的起点，同时利用了cookie记录上次未播放完的位置,下次可继续播放或重新播放；由于video的api 没有实际计算观看时长（也即用户实际观看的时长），所以用到了浏览器计算器时长，原理：当播放时，开始计算，暂停时和结束时，停止播放；
注意事项：video对象必须是HTMLDOM对象，获取方式 ：document.getElementById("play")或 var dom = $("#play").get(0);
同时,video对象必须是video标签等加载后才能获取到，window.onload后
参考：html5 video 事件及属性API http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
