path: root/files/zh-cn/orphaned/web/guide/events/media_events/index.html

---
title: 媒体相关事件
slug: orphaned/Web/Guide/Events/Media_events
tags:
  - Audio
  - Media
  - Video
translation_of: Web/Guide/Events/Media_events
original_slug: Web/Guide/Events/Media_events
---
<p>在处理用{{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }}标签嵌入到HTML文档中的媒体时，会触发多种事件。本章列出这些事件，并给出一些使用方法。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>事件名称</th>
   <th>描述</th>
  </tr>
  <tr>
   <td><code>abort</code></td>
   <td> 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。</td>
  </tr>
  <tr>
   <td><code>canplay</code></td>
   <td>在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。</td>
  </tr>
  <tr>
   <td><code>canplaythrough</code></td>
   <td>在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。</td>
  </tr>
  <tr>
   <td><code>durationchange</code></td>
   <td>元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。</td>
  </tr>
  <tr>
   <td><code>emptied</code></td>
   <td>媒体被清空（初始化）时触发。</td>
  </tr>
  <tr>
   <td><code>ended</code></td>
   <td>播放结束时触发。</td>
  </tr>
  <tr>
   <td><code>error</code></td>
   <td>在发生错误时触发。元素的error属性会包含更多信息。参阅 <a href="/en-US/docs/Web/API/HTMLMediaElement/error">HTMLMediaElement.error</a> 获得详细信息。</td>
  </tr>
  <tr>
   <td><code>interruptbegin</code></td>
   <td>声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
  </tr>
  <tr>
   <td><code>interruptend</code></td>
   <td>声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
  </tr>
  <tr>
   <td><code>loadedmetadata</code></td>
   <td>媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。</td>
  </tr>
  <tr>
   <td><code>loadstart</code></td>
   <td>在媒体开始加载时触发。</td>
  </tr>
  <tr>
   <td><code>mozaudioavailable</code></td>
   <td>当音频数据缓存并交给音频层处理时</td>
  </tr>
  <tr>
   <td><code>pause</code></td>
   <td>播放暂停时触发。</td>
  </tr>
  <tr>
   <td><code>play</code></td>
   <td>在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。</td>
  </tr>
  <tr>
   <td><code>playing</code></td>
   <td>在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。</td>
  </tr>
  <tr>
   <td><code>progress</code></td>
   <td>告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。</td>
  </tr>
  <tr>
   <td><code>ratechange</code></td>
   <td>在回放速率变化时触发。</td>
  </tr>
  <tr>
   <td><code>seeked</code></td>
   <td>在跳跃操作完成时触发。</td>
  </tr>
  <tr>
   <td><code>seeking</code></td>
   <td>在跳跃操作开始时触发。</td>
  </tr>
  <tr>
   <td><code>stalled</code></td>
   <td>在尝试获取媒体数据，但数据不可用时触发。</td>
  </tr>
  <tr>
   <td><code>suspend</code></td>
   <td>在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。</td>
  </tr>
  <tr>
   <td><code>timeupdate</code></td>
   <td>元素的currentTime属性表示的时间已经改变。</td>
  </tr>
  <tr>
   <td><code>volumechange</code></td>
   <td>在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。</td>
  </tr>
  <tr>
   <td><code>waiting</code></td>
   <td>在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。</td>
  </tr>
 </tbody>
</table>

<p>使用下面的代码，你可以很容易的观察到这些事件:</p>

<pre class="brush: js notranslate">var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
</pre>

<p>这个例子获取了文档中第一个video元素，并在video元素上监听了一个seeked事件，该事件会在跳跃操作完成后触发。监听器的处理函数就是简单的调用元素的play()方法，该方法会开始视频的播放。</p>

<p>接下来来看例子的第三行，这里设置了元素的crruentTime特性值为10.0，这会初始化一个在媒体中跳跃(快进)到10s位置的操作。操作开始时会引起一个seeking事件，随后当跳跃操作完成时会触发seeked事件。</p>

<p>换句话，本例中只要在媒体中跳跃到10s位置的操作完成，视频就会马上播放。</p>

<h2 id="兼容性">兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>load</td>
   <td>{{ CompatUnknown() }}</td>
   <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>mozaudioavailable {{ non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>suspend</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>load</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>mozaudioavailable {{ non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>suspend</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>