Difference between revisions of "Web/API/HTMLMediaElement/load"

Latest revision as of 03:51, 25 December 2020

The HTMLMediaElement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning. The amount of media data that is prefetched is determined by the value of the element's preload attribute.

This method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the media element itself. load() will reset the element and rescan the available sources, thereby causing the changes to take effect.

Syntax

mediaElement.load();

Parameters

None.

Return value

undefined.

Usage notes

Calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the <audio> or <video> element and its src attribute or child <source> element(s). This is described in more detail in Supporting multiple formats in Video and audio content.

The process of aborting any ongoing activities will cause any outstanding Promises returned by play() being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an "AbortError" DOMException.

Appropriate events will be sent to the media element itself as the load process proceeds:

If the element is already in the process of loading media, that load process is aborted and the abort event is sent.
If the element has already been initialized with media, the emptied event is sent.
If resetting the playback position to the beginning of the media actually changes the playback position (that is, it was not already at the beginning), a timeupdate event is sent.
Once media has been selected and loading is ready to begin, the loadstart event is delivered.
From this point onward, events are sent just like any media load.

Example

This example finds a <video> element in the document and resets it by calling load().

var mediaElem = document.querySelector("video");
mediaElem.load();

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLMediaElement.load()' in that specification.	Living Standard	Initial definition.
HTML5The definition of 'HTMLMediaElement.load()' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`load`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.6	IE ?	Opera Full support Yes	Safari Full support 6	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown

HTMLMediaElement.load() by Mozilla Contributors is licensed under CC-BY-SA 2.5.

@@ Line 6: / Line 6: @@
 <span class="seoSummary">The [[../../HTMLMediaElement|<code>HTMLMediaElement</code>]] method <code>load()</code> resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.</span> The amount of media data that is prefetched is determined by the value of the element's <code>preload</code> attribute.
-This method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's <code>src</code> attribute or by adding or removing [[../../../HTML/Element/source|<code>&lt;source&gt;</code>]] elements nested within the media element itself. <code>load()</code> will reset the element and rescan the available sources, thereby causing the changes to take effect.
+This method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's <code>src</code> attribute or by adding or removing [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source <code>&lt;source&gt;</code>] elements nested within the media element itself. <code>load()</code> will reset the element and rescan the available sources, thereby causing the changes to take effect.
 == Syntax ==
@@ Line 21: / Line 21: @@
 == Usage notes ==
-Calling <code>load()</code> aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the [[../../../HTML/Element/audio|<code>&lt;audio&gt;</code>]] or [[../../../HTML/Element/video|<code>&lt;video&gt;</code>]] element and its <code>src</code> attribute or child [[../../../HTML/Element/source|<code>&lt;source&gt;</code>]] element(s). This is described in more detail in [[../../../../Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Supporting_multiple_formats|Supporting multiple formats]] in [[../../../../Learn/HTML/Multimedia_and_embedding/Video_and_audio_content|Video and audio content]].
+Calling <code>load()</code> aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio <code>&lt;audio&gt;</code>] or [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video <code>&lt;video&gt;</code>] element and its <code>src</code> attribute or child [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source <code>&lt;source&gt;</code>] element(s). This is described in more detail in [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Supporting_multiple_formats Supporting multiple formats] in [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content Video and audio content].
-The process of aborting any ongoing activities will cause any outstanding [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise <code>Promise</code>]s returned by [[../play|<code>play()</code>]] being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an <code>&quot;AbortError&quot;</code> [https://developer.mozilla.org/en-US/docs/Web/API/DOMException <code>DOMException</code>].
+The process of aborting any ongoing activities will cause any outstanding [[../../../JavaScript/Reference/Global_Objects/Promise|<code>Promise</code>]]s returned by [[../play|<code>play()</code>]] being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an <code>&quot;AbortError&quot;</code> [[../../DOMException|<code>DOMException</code>]].
 Appropriate events will be sent to the media element itself as the load process proceeds:
@@ Line 35: / Line 35: @@
 == Example ==
-This example finds a [[../../../HTML/Element/video|<code>&lt;video&gt;</code>]] element in the document and resets it by calling <code>load()</code>.
+This example finds a [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video <code>&lt;video&gt;</code>] element in the document and resets it by calling <code>load()</code>.
 <syntaxhighlight lang="js">var mediaElem = document.querySelector("video");
@@ Line 151: / Line 151: @@
 </div>
-[[Category:html API References]]
+[[Category:javascript API References]]