多媒体元素不仅有相关的属性、方法，而且该元素还有一系列完备的事件机制。在本章前面介绍多媒体元素的“networkState”属性与“error”属性时，分别触发了“progress”事件与“error”事件。除此之外，还有许多记录媒体文件播放过程的事件，例如“playing”等。在媒体文件被浏览请求加载、开始加载、开始播放、暂停播放、播放结束这一系列的流程中所触发的事件，称为“媒体播放事件”，也是多媒体元素的核心事件。通过对这些事件的跟踪，可以很方便地获取媒体文件在各个阶段的播放状态。
下面通过一个实例讲解显示当前正在播放视频的状态的方法。
在本实例的页面中添加了一个多媒体元素<video>，并增加了“controls”属性；同时通过自定义函数绑定了多个播放事件。在事件中，分别记录媒体元素的即时状态，并以动态的方式，将状态内容显示在ID号为“spnPlayTip”的页面元素中。实例文件11.html的代码如下。
脚本文件js11.js的实现代码如下。(www.xing528.com)
通过上述代码实现了鼠标移至多媒体元素时显示媒体播放状态的功能，在移出元素时隐藏播放状态。实现方法是在多媒体元素的“onMouseOut”与“onMouseOver”事件中，通过传递不同的参数值调用同一个自定义的函数v_move（）。在该函数中将根据传回的参数值，显示或隐藏ID号为“pTip”的页面元素，从而实现鼠标移至或移出多媒体元素的效果。为了在多媒体元素触发播放事件的过程中，动态显示媒体文件的播放状态，需要在绑定的事件中，修改ID号为“spnPlayTip”的元素内容。
执行后的效果如图5-11所示。
图5-11 执行效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
