HTML Tags

HTML5 <video> Tag

Topic: HTML5 Tags ReferencePrev|Next

Description

The <video> element is used to embed video content in an HTML document without requiring any additional plugin like Flash player.

Support for the <video> element varies accross browsers. At the moment, there are three main video formats that is supported for the video element: MP4, Ogg and WebM.

The following table summarizes the usages context and the version history of this tag.

Placement: Block
Content: <source>, <track>, and text
Start/End Tag: Start tag: required, End tag: required
Version: New in HTML5

Syntax

The basic syntax of the <video> tag is given with:

HTML / XHTML: <video> ... </video>

The example below shows the <video> tag in action.

<video controls="controls" src="shuttle.mp4">
    Your browser does not support the HTML5 Video element.
</video>

A video, using the browser default set of controls, with alternative sources.

<video controls="controls">
    <source src="shuttle.mp4" type="video/mp4">
    <source src="shuttle.ogv" type="video/ogg">
    Your browser does not support the HTML5 Video element.
</video>

Tip: You can place content such as text or download link inside a video element to provide alternate content in case, if the browser does not support the video content or somehow failed to download the video source file.


Tag-Specific Attributes

The following table shows the attributes that are specific to the <video> tag.

Attribute Value Description
autoplay autoplay This Boolean attribute specifies that the video will automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls If specified, the browsers will display controls to allow the user to control video playback, such as play/pause, volume, etc.
height pixels Sets the height of the video's display area.
loop loop This Boolean attribute specifies that the video will automatically start over again, upon reaching the end.
muted muted This Boolean attribute specifies whether the video will be initially silenced. The default value is false, meaning that the audio will be played when the video is played.
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button. If this attribute isn't specified, nothing is displayed until the first frame of the video is available; then the first frame is displayed as the poster.
preload auto
metadata
none
Provides a hint to the browser about whether to download of the video itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a video, the browser will obviously need to download it.
src URL Specifies the location of the video file to embed. Alternatively, you can use the preferred <source> tag as it allows for multiple options.
width pixels Sets the width of the video's display area.

Global Attributes

Like all other HTML tags, the <video> tag supports the global attributes in HTML5.


Event Attributes

The <video> tag also supports the event attributes in HTML5.


Browser Compatibility

The <video> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 3.5+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 4+
  • Opera 10.5+

Further Reading

See tutorial on: HTML5 Video, HTML5 Audio.

Related tags: <source>, <track>, <audio>.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties