HTML5 Video(Video)

Many websites use video. HTML5 provides a standard for displaying video.

Check if Your Browser Supports HTML5 Video:

Video on Web Sites

Until now, there has been no standard for displaying video on web pages.

Today, most videos are displayed through plugins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video using the video element.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: Internet Explorer 8 or earlier versions do not support the <video> element.

HTML5 (Video) - How It Works

To display a video in HTML5, all you need is:

Example

The <video> element provides controls for playing, pausing, and adjusting the volume of the video.

The <video> element also provides width and height attributes to control the video's dimensions. If these attributes are set, the required video space is reserved when the page loads. If these attributes are not set, the browser does not know the size of the video and cannot reserve the specific space when the page loads, causing the page to change according to the original video size.

Content inserted between the <video> and </video> tags is displayed for browsers that do not support the video element.

The <video> element supports multiple <source> elements. The <source> element can link to different video files. The browser will use the first recognizable format:

Video Formats and Browser Support

Currently, the <video> element supports three video formats: MP4, WebM, and Ogg:

• MP4 = MPEG 4 file with H.264 video codec and AAC audio codec
• WebM = WebM file with VP8 video codec and Vorbis audio codec
• Ogg = Ogg file with Theora video codec and Vorbis audio codec

Video Formats

HTML5 <video> - Controlling with DOM

HTML5 <video> and <audio> elements also have methods, properties, and events.

Methods, properties, and events of the <video> and <audio> elements can be controlled using JavaScript.

These methods are used for playing, pausing, and loading. Properties (such as duration, volume, etc.) can be read or set. DOM events can notify you, for example, when the <video> element starts playing, is paused, is stopped, etc.

The example demonstrates how to use the <video> element, read and set properties, and call methods.

Example 1

Creating simple play/pause and resize controls for the video:

The example calls two methods: play() and pause(). It also uses two properties: paused and width.

For more references, see HTML5 Audio/Video DOM Reference.

HTML5 Video Tags