js动态显示媒体文件播放时间

 1.功能描述

为多媒体元素<video>添加一个“onTimeUpdate”事件,用于改变播放文件位置时调用。另外,增加一个ID号为“spnTimeTip”的<span>元素,用于动态显示媒体文件播放的当前时间与总量时间。

 

2.实现代码

在DreamweaverCS5中新建一个HTML页面dome.html,加入代码如代码清单dome所示。

代码清单dome 通过timeupdate事件动态显示媒体间文件播放时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动态显示媒体文件播放时间</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="jscript" src="jszh.js">
</script>
</head>
<body>
<div>
  <video id="vdoMain" src="123.ogg"
         width="360px" height="220px" controls 
         onMouseOut="v_move(0)" onMouseOver="v_move(1)"
         onPlaying="v_palying()" onPause="v_pause()"
         onLoadStart="v_loadstart();"
         onEnded="v_ended();"
         onTimeUpdate="v_timeupdate(this)" poster="123.jpg">
         你的浏览器不支持视频
  </video>
  <p id="pTip">
     <span id="spnPlayTip" class="spnL"></span>
     <span id="spnTimeTip" class="spnR">00:00 / 00:00</span>
  </p>
</div>
</body>
</html>
 
 

在代码清单dome中,页面导入一个Javascript文件jslO.js,其中,除其他自定义函数外,新增了一个函在改变播放位置时调用。其实现的代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Javascript Document
function $$(id) {
    return document.getElementById(id);
}
function v_move(v){
$$("pTip").style.display=(v)?"block":"none";
}
function v_loadstart() {
$$("spnPlayTip").innerHTML="开始加载";
}
function v_palying(){
$$("spnPlayTip").innerHTML="正在播放";
}
function v_pause(){
$$("spnPlayTip").innerHTML="已经暂停";
}
function v_ended(){
$$("spnPlayTip").innerHTML="播放完成";
}
function v_timeupdate(e){
var strCurTime=RuleTime(Math.floor(e.currentTime/60),2)+":"+
              RuleTime(Math.floor(e.currentTime%60),2);
    var strEndTime=RuleTime(Math.floor(e.duration/60),2)+":"+
              RuleTime(Math.floor(e.duration%60),2);
$$("spnTimeTip").innerHTML=strCurTime+" / "+strEndTime;
}
//转换时间显示格式
function RuleTime(num, n) {
    var len = num.toString().length;
    while(len < n) {
        num = "0" + num;
        len++;
    }
    return num;
}
 

3.源码分析

在本实例中,当多媒体元素触发timeupdate事件时,调用_个自定义函数v_timeupdate()t在该函数中,分别使用整除与求余数的方法,分割多媒体元素当前时间(currentTime)属性与时间总量(duration)属性返回的秒值,组成分与秒的格式。在组成过程中,又调用了另外一个自定义函数RuleTime(),该函数可以将长度不足2位的数字,在前面加“0”进行补充,实现过程如Javascript代码中加粗部分所示。



[本日志由 admin 于 2017-04-10 10:13 AM 编辑]
上一篇: 获取表单元素各值相关
下一篇: 具有回放、慢动作播放功能的视频播放器
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 动态显示 媒体文件 播放时间
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.