AzureDays

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

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.

Simple Example

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 video element.

Poster

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

The video element allows multiple source elements. 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.

 

Browser	MP4	WebM	Ogg
IE 9+	Yes	With Add-in*	No
Chroms 6+	Yes	Yes	Yes
Firefox 3.6+	No	Yes	Yes
Safari 5+	Yes	No	No
Opera 10.6+	No	Yes	Yes

• 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.

 

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Modernizr

With Modernizr’s video detection, you can use CSS and JavaScript styling to further enhance the look and/or interactivity when the browser does support video.

If video support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, webm and h264.

See Video for Everybody for a JavaScript-less way to use HTML5 video with graceful fallbacks for all browsers. It will gracefully fall back to Flash if available.

Flash Support

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.

For example,

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.

Audio

The HTML5 audio element provides a scriptable object that can play audio files without an add-on or plug-in. At its simplest, a single tag and a couple of attributes provide a player on a webpage for your users. By using JavaScript, you can manage the audio object and assign events to provide a full range of control and status tracking.

The audio element is defined similarly to the video element, but without the width, height, and poster attributes.

Your code for items such as progress monitoring, file loading, or play and seek, are interchangeable. In addition to methods and properties, like most JavaScript objects.

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.

Server Support

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

IIS supports serving .Ogg, WevM, and MP4.

Apache support is explained in <video> on Mozilla.

References

• 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

Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials