<video>

  • Revision slug: HTML/Element/Video
  • Revision title: video
  • Revision id: 8272
  • Created:
  • Creator: sorinelpusti
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ gecko_minversion_header("1.9.1") }}

The video element is used to embed video content in an HTML or XHTML document.  The video element was added as part of HTML 5.

  • Element Type: block-level
  • Allowed Content: alternate text
Note: Currently, Firefox supports only Theora for video, in Ogg containers.  Also, the server must serve the file using the correct MIME type in order for Firefox to play it correctly.

Attributes

Note that several attributes are not yet supported by Firefox.

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, Firefox 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 {{ unimplemented_inline() }} {{ bug("449156") }}
An URL indicating a poster frame to show while no video data is available. If this attribute isn't specified, nothing is displayed until the video is available for playback.
src
The URL of the video to embed. This is optional; you may instead use the source element within the audio block to specify the audio 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>
  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.

Server support

It's worth re-emphasizing for the time being, that if the mimetypes 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 mimetype "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 mimetype configuration changes for new technologies until a global update naturally occurs.

See also

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

Revision Source

<p>{{ 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.  The <code>video</code> element was added as part of HTML 5.</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"><strong>Note:</strong> Currently, Firefox supports only Theora for video, in Ogg containers.  Also, the server must serve the file using the correct MIME type in order for Firefox to play it correctly.</div>
<h2>Attributes</h2>
<p>Note that several attributes are not yet supported by Firefox.</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, Firefox 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 {{ unimplemented_inline() }} {{ bug("449156") }}</dt> <dd>An URL indicating a poster frame to show while no video data is available. If this attribute isn't specified, nothing is displayed until the video is available for playback.</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 audio block to specify the audio 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&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.</p>
<h2>Server support</h2>
<p>It's worth re-emphasizing for the time being, that if the mimetypes 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 mimetype "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 mimetype 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><code>{{ interface("nsIDOMHTMLMediaElement") }}</code></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>
</ul>
<p>{{ languages( { "fr": "fr/HTML/Element/video" } ) }}</p>
Revert to this revision