HTML Tutorial | HTML5 Multimedia | Video Element

Video Element

Before HTML5, there was no standard way to show video on a web page. Therefore, embedding video required reliance on external plug-ins such as Flash.
HTML5 provides a standardized way to embed video in a web page by using the <video> tag.

The major web browser versions that support the <video> tag are as follows.

Attributes of the Video Element

Example

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    This sentence appears when the user's web browser does not support the video element.
</video>

The controls attribute creates a panel for controlling basic video operations such as play, stop, and volume adjustment.
The height and width attributes can also specify the size of the video inserted into the web browser.

Among multiple <source> tags, the web browser uses the first file type and address it recognizes, checking from top to bottom.
Text placed between <video> tags is displayed only when the browser does not support the <video> tag.

The autoplay attribute sets whether the video should play automatically when the web page loads.

Example

<video style="width:576; height:360" controls autoplay>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    This sentence appears when the user's web browser does not support the video element.
</video>

When the loop attribute is set, the video keeps repeating even after playback ends.

Example

<video style="width:576; height:360" controls loop>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    This sentence appears when the user's web browser does not support the video element.
</video>

The <track> tag is used to specify subtitle or caption files to show while the video plays.

Example

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
    This sentence appears when the user's web browser does not support the video element.
</video>

The kind attribute specifies the type of subtitle text, and the srclang attribute specifies the language setting for that text.
The label attribute specifies the label that users will see.

HTML5 Video File Formats

The only video file formats officially supported by the HTML5 standard are MP4, WebM, and OGV.

• MP4: Developed by the Moving Picture Experts Group; uses H.268 as the video codec and AAC as the audio codec. Because it can provide high-quality video and audio with a small file size, it is widely used for internet streaming.
• WebM: An open multimedia file format developed with support from Google; uses VP8 as the video codec and Vorbis as the audio codec.
• OGV: Also called Theora Ogg; an open multimedia file format developed by the Xiph Foundation as an alternative to MP3 and not protected by patents. It uses Theora as the video codec and Vorbis as the audio codec.

The following table shows support for each HTML5 video file format in major web browsers.

HTML5 video Elements

HTML5 video Attributes