<video>

  • Revision slug: HTML/Element/Video
  • Revision title: video
  • Revision id: 8286
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ HTMLVersionHeader("5") }}{{ gecko_minversion_header("1.9.1") }}

The video element is used to embed video content in an HTML or XHTML document.

  • Element Type: block-level
  • Allowed Content: alternate text

Implementation note:

Firefox supports the following formats, if and only if the server serve the file the correct MIME type.

Container Codec MIME Type Comment
Ogg Theora video/ogg  
WebM VP8 video/webm {{ gecko_minversion_inline("1.9.3") }}
none Raw video/x-raw-yuv {{ gecko_minversion_inline("1.9.3") }}

Attributes

Note that several attributes are not yet supported by Gecko.

autoplay
A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer
A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.
controls
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
height
The height of the video's display area, in CSS pixels.
loop {{ unimplemented_inline() }} {{ bug("449157") }}
A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.
poster {{ gecko_minversion_inline("1.9.2") }}
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
src
The URL of the video to embed. This is optional; you may instead use the source element within the video block to specify the video to embed.
width
The width of the video's display area, in CSS pixels.

Time offsets are currently specified as a float value representing the number of seconds to offset.

Note: The time offset value definition has not yet been completed in the HTML 5 specification and is subject to change.

Examples

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Your browser does not support the <code>video</code> element.
</video>

Plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.

Server support

It's worth re-emphasizing for the time being, that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

You can fix this problem for the Apache Web Server by adding the extension used by your Theora video files (".ogm", ".ogv", or ".ogg" are the most common ones) to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache" or  via the "AddType" configuration directive in httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

See also

{{ languages( { "fr": "fr/HTML/Element/video" } ) }}

Revision Source

<p>{{ HTMLVersionHeader("5") }}{{ gecko_minversion_header("1.9.1") }}</p>
<p>The <code>video</code> element is used to embed video content in an HTML or XHTML document.</p>
<ul> <li>Element Type: <a class="internal" href="/en/HTML/Block-level_elements" title="en/HTML/Block-level elements">block-level</a></li> <li>Allowed Content: alternate text</li>
</ul>
<div class="note">
<p><strong>Implementation note:</strong></p>
<p>Firefox supports the following formats, if and only if the server serve the file the correct MIME type.</p>
<table class="standard-table" style="width: 191px; height: 136px;"> <tbody> <tr> <th>Container</th> <th>Codec</th> <th>MIME Type</th> <th>Comment</th> </tr> <tr> <td>Ogg</td> <td>Theora</td> <td>video/ogg</td> <td> </td> </tr> <tr> <td><a class=" external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a></td> <td>VP8</td> <td>video/webm</td> <td>{{ gecko_minversion_inline("1.9.3") }}</td> </tr> <tr> <td><em>none</em></td> <td>Raw</td> <td style="white-space:no-wrap">video/x-raw-yuv</td> <td>{{ gecko_minversion_inline("1.9.3") }}</td> </tr> </tbody>
</table>
</div>
<h2>Attributes</h2>
<p>Note that several attributes are not yet supported by Gecko.</p>
<dl> <dt>autoplay</dt> <dd>A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.</dd> <dt>autobuffer</dt> <dd>A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.</dd> <dt>controls</dt> <dd>If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd> <dt>height</dt> <dd>The height of the video's display area, in CSS pixels.</dd> <dt>loop {{ unimplemented_inline() }} {{ bug("449157") }}</dt> <dd>A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.</dd> <dt>poster {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.</dd> <dt>src</dt> <dd>The URL of the video to embed. This is optional; you may instead use the <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> element within the video block to specify the video to embed.</dd> <dt>width</dt> <dd>The width of the video's display area, in CSS pixels.</dd>
</dl>
<p>Time offsets are currently specified as a float value representing the number of seconds to offset.</p>
<div class="note"><strong>Note:</strong> The time offset value definition has not yet been completed in the HTML 5 specification and is subject to change.</div>
<h2>Examples</h2>
<pre class="brush: html">&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;
</pre>
<p>Plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.</p>
<h2>Server support</h2>
<p>It's worth re-emphasizing for the time being, that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p>
<p>You can fix this problem for the Apache Web Server by adding the extension used by your Theora video files (".ogm", ".ogv", or ".ogg" are the most common ones) to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache" or  via the "AddType" configuration directive in httpd.conf.</p>
<pre>AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>
<p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p>
<h2>See also</h2>
<ul> <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/En/Using_audio_and_video_in_Firefox" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML 5.</li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML 5 specification)</li> <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
</ul>
<p>{{ languages( { "fr": "fr/HTML/Element/video" } ) }}</p>
Revert to this revision