source
elementtrack
elements.src
type
media
interface HTMLSourceElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString media; };
The source
element allows authors to specify
multiple alternative media resources for
media elements. It does
not represent anything on its own.
The src
attribute gives the
address of the media resource. The value must be a valid
non-empty URL potentially surrounded by spaces. This attribute
must be present.
Dynamically modifying a source
element and its attribute when the
element is already inserted in a video
or audio
element will have no effect. To change what is playing, just use
the src
attribute on the media element directly, possibly making use
of the
canPlayType()
method to pick from amongst available
resources. Generally, manipulating source
elements manually after the
document has been parsed is an unnecessarily complicated
approach.
The type
attribute gives the type
of the media resource, to help the user agent
determine if it can play this media resource before fetching it. If
specified, its value must be a valid MIME type. The codecs
parameter, which certain MIME types define, might
be necessary to specify exactly how the resource is encoded.
[RFC4281]
The following list shows some examples of how to use the
codecs=
MIME parameter in the type
attribute.
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
<source src='audio.spx' type='audio/ogg; codecs=speex'>
<source src='audio.oga' type='audio/ogg; codecs=flac'>
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
The media
attribute gives the
intended media type of the media resource, to help the user agent
determine if this media resource is useful to the user before
fetching it. Its value must be a valid media query.
The resource
selection algorithm is defined in such a way that when the
media
attribute is omitted the user agent
acts the same as if the value was "all
", i.e.
by default the media resource is suitable for all
media.
If the author isn't sure if the user agents will all be able to
render the media resources provided, the author can listen to the
error
event on the last
source
element and trigger fallback
behavior:
<script> function fallback(video) { // replace <video> with its contents while (video.hasChildNodes()) { if (video.firstChild instanceof HTMLSourceElement) video.removeChild(video.firstChild); else video.parentNode.insertBefore(video.firstChild, video); } video.parentNode.removeChild(video); } </script> <video controls autoplay> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' onerror="fallback(parentNode)"> ... </video>