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

Adding an HTML5 video control to your webpage

Using HTML5 video, you can embed a full featured video player on your webpage, without requiring a third-party plug-in or even JavaScript.

Using JavaScript to control the HTML5 video player

The HTML5 video object provides methods, properties, and events that you can use to control playback from JavaScript.

Using HTML5 video events

HTML5 video events provide ways to streamline and add efficiency to your webpages.

 

Adding an video control to your webpage

Using JavaScript to control the HTML5 video player

Using HTML5 video events