HTML5 Video
Many websites use video. HTML5 provides a standard for displaying video.
Check if your browser supports HTML5 video:
Video on Web Pages
Until now, there has still 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 through the video element.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.
Note:Internet Explorer 8 or earlier versions of IE do not support the <video> element.
HTML5 Video - How It Works
To display video in HTML5, all you need is:
Examples
Try it Yourself »
The <video> element provides play, pause, and volume controls to control the video.
The <video> element also provides width and height attributes to control the video size. If the height and width are set, the required video space will be reserved when the page loads. If these attributes are not set, the browser does not know the size of the video, so it cannot reserve specific space during loading, and the page will change according to the original video size.
Content inserted between the <video> and </video> tags is provided 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 recognized format:
Video Formats and Browser Support
Currently, the <video> element supports three video formats: MP4, WebM, and Ogg:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25 onwards) | YES | YES |
- MP4 = MPEG 4 files with H.264 video encoding and AAC audio encoding
- WebM = WebM files with VP8 video encoding and Vorbis audio encoding
- Ogg = Ogg files with Theora video encoding and Vorbis audio encoding
Video Format
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - Control using DOM
HTML5 <video> and <audio> elements also have methods, properties, and events.
The methods, properties, and events of <video> and <audio> elements can be controlled using JavaScript.
The methods are used for playing, pausing, and loading, etc. The properties (such as duration, volume, etc.) can be read or set. The DOM events can notify you, for example, when the <video> element starts playing, is paused, has stopped, etc.
The simple methods in the example demonstrate how to use the <video> element, read and set properties, and how to call methods.
Example 1
Create simple play/pause and resize controls for the video:
The example above calls two methods: play() and pause(). It also uses two properties: paused and width.
Try it Yourself »For more reference, please seeHTML5 Audio/Video DOM Reference Manual。
HTML5 Video Tags
| Tag | Description |
|---|---|
| <video> | Defines a video |
| <source> | Defines multiple media resources, such as <video> and <audio> |
| <track> | Defines text tracks in media player |