js动态显示媒体文件播放时间
作者:admin 日期:2017-04-08
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: 动态显示 媒体文件 播放时间 
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
回复
黑皇帝安全网[2018-08-14 04:55 PM | 
| 
| 
]发表评论
