例（源代码参见“chap7.4.3.1.html”）讲解一下多媒体元素事件的用法，在本例中将在页面中显示要播放的多媒体文件，同时显示多媒体文件的总时间，当单击“播放”按钮时，将显示当前播放的时间。多媒体文件的总时间与当前时间将以“时：分：秒”的形式显示。
本实例的实现步骤：
（1）通过video标签添加多媒体文件，代码如下：
<video>
（2）在页面上放置一个一行三列的表格，在3个单元格中放置3个div标签，分别为“播放／暂停”按钮、媒体总时间、当前播放时间，代码如下：
（3）通过querySelector方法获取div标签中class的值，并赋给变量。其实现的主要代码如下：
（4）使用video元素的addEventListener方法对loadeddata事件进行监听，同时绑定canplay函数，在这个函数中调用initControls函数，在该函数中用分秒来显示当前播放时间。同时调用play方法触发onclick事件，在这个事件中对播放的进度进行判断，当播放完成后，当前播放为0，否则通过三位运算符执行播放或暂停。代码如下：(www.xing528.com)
（5）由于currentTime和duration的时间值默认的单位是秒，而总时间和当前播放时间是以分和秒的形式输出，这就需要转换，方法是：通过asTime函数获取时间，利用Math.round函数对其进行取整，再将秒转化为分、时。代码如下：
（6）使用video元素的addEventListener方法对play、pause、ended等事件进行监听，同时绑定playEvent、pauseEvent函数，实现“播放／暂停”的转化。代码如下：
（7）使用video元素的addEventlistener方法对durationchange和timeupdate等事件进行监听，同时绑定updateSeekable和updatePlayhead函数，在这两个函数中输出媒体文件的总时间长度和当前播放时间。代码如下：
其运行效果如图7.4所示。
图7.4 事件捕捉实例
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
