5.3.6  显示播放视频的时间信息

5.3.6 显示播放视频的时间信息

在多媒体元素的众多事件中，事件“timeupdate”是一个十分重要的事件。在媒体文件播放过程中，如果播放位置发生变化，就会触发该事件。通过该事件可以结合多媒体元素的“currentTime”与“duration”属性，可以动态显示媒体文件播放的当前时间与总量时间。

下面通过一个实例讲解显示播放视频时间信息的方法。

本实例的功能是为多媒体元素<video>添加一个“onTimeUpdate”事件，用于改变播放文件位置时调用。另外新增加一个ID号为“spnTimeTip”的<span>元素，用于动态显示媒体文件播放的当前时间与总量时间。实例文件12.html的代码如下。

脚本文件js12.js的主要实现代码如下。

在上述代码中，当多媒体元素触发“timeupdate”事件时调用自定义函数v_timeupdate（），通过该函数分别使用整除与求余数的方法，分割多媒体元素当前时间“currentTime”属性与时间总量“duration”属性返回的秒值，最终组成一个分与秒的格式。在组成过程中，又调用了另外一个自定义函数RuleTime（），该函数可以将长度不足2位的数字，在前面加“0”进行补充。

执行后的效果如图5-12所示。

图5-12 执行效果