HTML Elements Reference: VIDEO Element

asp.net.ph

Home > Abakada: Back to Basics > Language References > HTML Elements > VIDEO Element

Embeds video content in an HTML document.

HTML 5

<video
   autoplay
   crossorigin = anonymous | use-credentials
   controls
   height = int | percentage
   loop
   muted
   poster = url
   preload = auto | metadata | none
   src = url
   width = int | percentage
>
   <source ... />
   <track ... />
/<video

NOTE: Both start and end tags are required.

The <video> element is used to embed video content in an HTML document, without requiring any third-party plug-in or involve complex scripting.

In its simplest form, the src attribute is required, which specifies the location of the video file to embed.

<video src="clip.mp4" ...></video>

Alternatively, authors can use the <source> element, as it allows for multiple alternative options.

A <source> tag specifies a video file, which can be any of three supported video formats in HTML: MP4, WebM, and OGG.

The <source> tags are defined as child elements of the <video>...</video> tag.

<video ...>
   <source src="clip.mp4" ...>
   <source src="clip.ogg" ...>
</video>

The browser plays the first source it supports.

In addition, a video element can contain one or more <track> elements when the video content includes tracks for captions, chapters, descriptions, metadata or subtitles.

Likewise, <track> tags are defined as child elements of the <video>...</video> tag.

<video ...>
   <source src="clip.mp4" ...>
   <source src="clip.ogg" ...>
   <track src="subs_en.vtt" kind="subtitles" ...>
   <track src="subs_no.vtt" kind="subtitles" ...>
</video>

A download link or some “fallback” text can be defined within the <video>...</video> tags, to provide alternate content in cases where the browser does not support the video element or the video content, or somehow failed to download the video source file.

<video src="clip.mp4" ...>
   Sorry, your browser does not support video playback.
   http://somewhere.com/media/clip.mp4
</video>

The <video> element supports the following attributes, in addition to global attributes common to all HTML elements.

Attribute	Value	Description
autoplay	autoplay	Specifies that the video will start playing as soon as it is ready
controls	controls	Specifies that video controls should be displayed (such as a play/pause button etc).
height	pixels	Sets the height of the video player
loop	loop	Specifies that the video will start over again, every time it is finished
muted	muted	Specifies that the audio output of the video should be muted
poster	URL	Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload	auto, metadata, none	Specifies if and how the author thinks the video should be loaded when the page loads
src	URL	Specifies the URL of the video file
width	pixels	Sets the width of the video player

The following example shows how the <video> element may be used.

<video autoplay controls width=640 height=360>
   <source src="praise.mp4" type="video/mp4">
   Sorry, your browser does not support the video element.
</video>

which would render on a Web page as follows: