Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the
video element, but you may need multiple files to support the video formats.
For this demo, I’m using a video that is in the public domain, Popeye for President.
Here is a simple example.
Always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, if you do not include these attributes, the browser does not know the size of the video and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading — while the video loads.
You should also insert text content between the opening and closing
video tags for browsers that do not support the
You can specify a picture to shows in the frame until the user plays or seeks. The poster attribute is a URL that points to the image you want to show.
Other Video Attributes
There are some other commonly supported attributes. These include:
- autoplay. Video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
- loop. Restarts the video automatically.
- controls. The browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
- preload. Some browsers support this attribute that provide a hint to how much buffering is advisable for a media resource, even if autoplay is not specified. The values can be:
- none. You expect the user to not need the media resource, or the server wants to minimize unnecessary traffic
- metadata. You does not expect the user to need the resource. However, if the resource metadata (dimensions, first frame, track list, duration, and so on) is available, using a resource is preferred unless it impacts performance to do so.
- auto. You give the user access to media content, which includes the ability to download the entire resource.
Multiple Format Support
video element allows multiple
source elements can link to different video files. The browser will use the first recognized format.
The current HTML5 draft specification does not specify which video formats browsers should support. User agents are free to support any video formats they feel are appropriate, but content authors cannot assume that any video will be accessible by all complying user agents, since user agents have no minimal set of video formats to support.
|IE 9+||Yes||With Add-in*||No|
- MP4 = MPEG 4 files with H264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
*WebM audio and video files can be supported in IE by installing the WebM components from The WebM project.
MIME Types for Video Format
You should include the MIME Type in the type attribute of the video element.
If video support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests
video with graceful fallbacks for all browsers. It will gracefully fall back to Flash if available.
Browsers disregard what they don’t understand, so your HTML5 audio and source elements will be completely ignored by older browsers such as Internet Explorer 8. So, you may want to offer support for Flash as a fallback in your application. HTML5 allows for this using the object tag.
An older browser such as Internet Explorer 8 will display the video in Flash Player (if Flash Player is installed on the system) and also the download link. By providing a download link as well as a Flash Player fallback, you’re giving users who don’t have Flash Player installed a way access the video by downloading it and viewing it from their desktop.
Digital rights management
If you’re concerned about people being able to download and freely share your videos, then HTML5 video may not be right for you. When you use any of the methods described in this article, you enable users to access the direct URL to your video files, which they can then freely download. There is currently no way to prevent this with HTML5.
At some point in the future a standard method may emerge to handle digital rights management (DRM) in HTML5 itself, but currently there is no such method.
For more information on HTML5 and DRM see the W3C’s HTML FAQs.
The audio element is defined similarly to the video element, but without the width, height, and poster attributes.
Use the src attribute to specify the audio file to play, and the controls attribute so that the built-in, player controls are used. If you use the browser’s player, no additional scripting is required. The player may vary in style or functionality between browsers.
In Windows Internet Explorer 9, the audio element displays a simple player that has basic play, pause, position slider, and volume controls. The player also displays the playing time, and the time left in the file. If you hover over either time display, you can skip forward or backward by 30 seconds.
You can customize the look and feel of the controls. You can learn more in the next blog post in this series.
IIS supports serving .Ogg, WevM, and MP4.
Apache support is explained in <video> on Mozilla.
- Video on the Web
- Video (Windows)
- Working with HTML5 multimedia components – Part 1: Video from Adobe
- Working with HTML5 multimedia components – Part 2: Audio from Adobe
- <video> element on Mozilla Developer Network
- Working with Media in HTML5 in MSDN Magazine
- HTML5 Multimedia Develop and Design
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials