---
title: 'HTMLMediaElement: ended'
slug: Web/API/HTMLMediaElement/ended_event
translation_of: Web/API/HTMLMediaElement/ended_event
---
<p>如果playback或者streaming达到了媒体的未尾或者没有更多可用的数据，将会引发一个<code>ended</code>事件。</p>

<p>这个事件将会发生在三个相关但独立的上下文中：</p>

<ul>
 <li>Elements based upon {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} and {{HTMLElement("video")}}) fire <code>ended</code> when playback of the media reaches the end of the media.</li>
 <li>Media streams' tracks, which are based on the {{domxref("MediaStreamTrack")}} interface, fire <code>ended</code> when the track's source permanently stops sending data on the stream. There are various ways this can happen, including:
  <ul>
   <li>There is no more data left to send.</li>
   <li>The user revoked the permissions needed for the data to be sent.</li>
   <li>The hardware generating the source data has been removed or ejected.</li>
   <li>A remote peer has permanently stopped sending data; pausing media <em>does not</em> generate an <code>ended</code> event.</li>
  </ul>
 </li>
 <li>一个<a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>节点停止了播放。这可能是由于它到达了之前设置好的终止时间点，也可能是已播放完了整个音频，或者是已播放完了buffer中的数据。另见{{domxref("AudioScheduledSourceNode")}}。</li>
</ul>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a>, <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a> and <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">可取消的</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">默认操作</dt>
 <dd style="margin: 0 0 0 120px;">无。</dd>
</dl>

<div class="note">
<p>While this event is defined in more than one specification, at this time they specify this event identically, so we have documented them as if they were one. If at some point that changes, the documentation will be revised.</p>
</div>

<h2 id="Properties">Properties</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Property</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>The event target (the topmost target in the DOM tree).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>The type of event.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Whether the event normally bubbles or not.</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Whether the event is cancellable or not.</td>
  </tr>
 </tbody>
</table>

<h2 id="Related_Events">Related Events</h2>

<ul>
 <li>{{event("playing")}}</li>
 <li>{{event("waiting")}}</li>
 <li>{{event("seeking")}}</li>
 <li>{{event("seeked")}}</li>
 <li>{{event("ended")}}</li>
 <li>{{event("loadedmetadata")}}</li>
 <li>{{event("loadeddata")}}</li>
 <li>{{event("canplay")}}</li>
 <li>{{event("canplaythrough")}}</li>
 <li>{{event("durationchange")}}</li>
 <li>{{event("timeupdate")}}</li>
 <li>{{event("play")}}</li>
 <li>{{event("pause")}}</li>
 <li>{{event("ratechange")}}</li>
 <li>{{event("volumechange")}}</li>
 <li>{{event("suspend")}}</li>
 <li>{{event("emptied")}}</li>
 <li>{{event("stalled")}}</li>
</ul>