How to use HTML5 to play video files on your webpage
Using HTML5 video, you can add and control video content on your webpages, without requiring external controls or plug-ins.
Playing video on your webpage
Video has become a staple on the web, with content ranging from playful cats to serious documentation. This series shows you how to use HTML5 to add a video player to your webpage, without requiring third-party controls or plug-ins. You'll need a modern browser that supports HTML5 video to fully appreciate the examples, but you'll also see how to use an embedded third-party player for compatibility with older browsers.
The examples and images are presented using Windows Internet Explorer 9 and Internet Explorer 10, but we'll make note of any differences with other browsers.
Note If you are developing on an intranet and you have rendering issues for HTML5 video and other features, you can add <meta http-equiv-"X-UA-Compatible" content="IE=edge"/> to the "<head>" block of a webpage for testing. This forces Windows Internet Explorer to use the latest standards. If you prefer, configure your web development server to send a meta http-equiv-"X-UA-Compatible" header with IE=9 or IE=10 instead. For more info about document compatibility, see Defining Document Compatibility.
Serving audio and video content for your webpage
The main difference between browsers is most likely their support of different video formats. HTML5 video is an emerging standard and isn't tied to any one video format. Internet Explorer primarily supports H.264 video. For more info about HTML5 video format support in Internet Explorer, see the IEBlog posts titled HTML5 Video, Follow up on HTML5 video in IE9, and Another follow up on HTML5 video in IE9.
Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project. The following table shows the required settings for your web server to host these files correctly.
| Media file to serve | Extension setting | Mime type setting |
|---|---|---|
| Audio mp3 | mp3 | audio/mpeg |
| Audio mp4 | m4a | audio/mp4 |
| Audio webm | webm | audio/webm |
| Video mp4 (H.264) | mp4 | video/mp4 |
| Video webm | webm | video/webm |
In this section
| Topic | Description |
|---|---|
Using HTML5 video, you can embed a full featured video player on your webpage, without requiring a third-party plug-in or even JavaScript. |
|
The HTML5 video object provides methods, properties, and events that you can use to control playback from JavaScript. |
|
HTML5 video events provide ways to streamline and add efficiency to your webpages. |
Related topics
Adding an video control to your webpage