多媒体元素的事件捕捉类型

灰太狼 2022-05-18 10:05 195阅读 0赞

在html5中，在使用多媒体标签<video>和<audio>读取播放多媒体时，会触发一系列的事件，通过javascript捕捉响应的事件，就可以对这些事件进行相应的处理**。**

**事件捕捉方法主要有两类：**

1.  **监听方式**

**格式：多媒体元素dom对象 . addEventListener( type , listener , useCapture );**

**参数：**

<table style="width:400px;"> 
 <tbody> 
  <tr> 
   <td style="width:104px;"><span style="color:#ffbb66;">type</span></td> 
   <td style="width:295px;">捕捉事件名称</td> 
  </tr> 
  <tr> 
   <td style="width:104px;"><span style="color:#86ca5e;">listener</span></td> 
   <td style="width:295px;">绑定的函数</td> 
  </tr> 
  <tr> 
   <td style="width:104px;"><span style="color:#e579b6;">useCapture</span></td> 
   <td style="width:295px;">事件的响应顺序，该参数为布尔型，如果为true表示，采用Capture方式，如果为false，采用bubbing方式，默认赋值为false.</td> 
  </tr> 
 </tbody> 
</table>

**  2. 获取事件句柄**

这是比较常见的一种方式，通过在多媒体元素中使用onPlay,onPause等句柄获取事件，同时在指定的javascript中编写处理代码。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:160px;"><strong><span style="color:#3399ea;">事件</span></strong></td> 
   <td style="width:339px;"><strong><span style="color:#3399ea;">定义</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onPlay</td> 
   <td style="width:339px;">播放时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onPause</td> 
   <td style="width:339px;">暂停时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onProgress</td> 
   <td style="width:339px;">正在加载时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onTimeUpdate</td> 
   <td style="width:339px;">播放位置发生改变时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onEnded</td> 
   <td style="width:339px;">播放结束时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onVolumeChange</td> 
   <td style="width:339px;">音量改变时触发</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">onError</td> 
   <td style="width:339px;">加载数据出错时触发</td> 
  </tr> 
 </tbody> 
</table>