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.
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.
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|
|Video mp4 (H.264)||mp4||video/mp4|
HTML5 video events provide ways to streamline and add efficiency to your webpages.
- Adding an video control to your webpage
- Using HTML5 video events