html5视频和音频（第二篇）显示视频播放状态以及时间信息
显示视频的播放状态
onmouseover和onmouseout鼠标移入移出时触发的事件：
html5 部分代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" language="jscript" src="js11.js"></script> </head> <body> <div> <video id="vdoMain" src="ogg-19M.ogg" width="360px" height="220px" controls onMouseOut="v_move(0)" onMouseOver="v_move(1)" onPlaying="v_playing()" onPause="v_pause()" onLoadStart="v_loadstart()" onEnded="v_ended()" poster="a2.ico"> 您的浏览器不支持视频 </video> <p id="pTip"> <span id="spanPlayTip" class="spnL">播放完成</span> </p> </div> </body> </html>
js部分代码
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 } 5 function v_move(v){ 6 $$("pTip").style.display=(v)?"block":"none"; 7 } 8 function v_loadstart(){ 9 $$("spanPlayTip").innerHTML="开始加载"; 10 } 11 function v_playing(){ 12 $$("spanPlayTip").innerHTML="正在播放"; 13 } 14 function v_pause(){ 15 $$("spanPlayTip").innerHTML="已经暂停"; 16 } 17 18 function v_ended(){ 19 $$("spanPlayTip").innerHTML="播放完成"; 20 }
onmouseover和onmouseout鼠标移入移出时触发的事件
onPlaying="v_playing()" onPause="v_pause()" onLoadStart="v_loadstart()"
onEnded="v_ended()"
开始加载
正在播放
已经暂停
播放完成
显示播放视频的时间信息
html5中的代码
第一步：当多媒体触发“timeupdate”事件调用v_timeupdate(),
1 onTimeUpdate="v_timeupdate(this)"
第二步：通过此函数分别使用整除以及求余数的方法，调用RuleTime（）函数不足2位数字前面加“0”
1 var strCurTime=RuleTime(Math.floor(e.currentTime/60),2)+":"+ 2 RuleTime(Math.floor(e.currentTime%60),2); 3 var strEndTime=RuleTime(Math.floor(e.duration/60),2)+":"+ 4 RuleTime(Math.floor(e.duration%60),2); 5 $$("spnTimeTip").innerHTML=strCurTime+"/"+strEndTime; 6 } 7 //转换时间显示格式 8 function RuleTime(num,n){ 9 var len=num.toString().length; 10 while(len<n){ 11 num="0"+num; 12 len++; 13 } 14 return num; 15 }
第三步：通过<span>元素显示出来
1 <span id="spnTimeTip" class="spanR">00:00/00:00</span> </p>
