html5视频和音频（第二篇）显示视频播放状态以及时间信息

最新推荐文章于 2021-10-31 21:01:31 发布

anys0520

最新推荐文章于 2021-10-31 21:01:31 发布

阅读量763

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwn-lucky7/p/6506506.html

版权

显示视频的播放状态

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>

转载于:https://www.cnblogs.com/zwn-lucky7/p/6506506.html

anys0520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫