IE9 Mobile is full steam ahead on HTML5. We will be doing a series of blog posts specifically devoted to introducing new HTML5 features enabled on IE9 Mobile. Our goal is to get mobile web developers excited about our browser platform and offer a better mobile browsing experience for users of their websites. Stay tuned!
HTML5 video is one of the most visible and easily adoptable features of the HTML5 standard. It is even more important on smartphones, because there isn’t another standard for delivering video that works across all major mobile browsers, making HTML5 video the only interoperable way to embed video on web pages. With the Mango release, we are adding support for the HTML5 <video> tag to the browser in a way that is standards-compliant, hardware-accelerated, and optimized for a mobile viewing experience. YouTube is already taking advantage of this support as they rolled out a new mobile site tailored for the Mango browser. While you can certainly rely on the excellent MSDN articles on the what’s and how’s of HTML5 video in general (please see reference links at the end of the post), in this blog post I would like to talk about some aspects of the HTML5 video feature from the IE9 Mobile’s point of view.
Same Implementation on Mobile and Desktop
In the Mango release, we are sharing the same browser as desktop IE, with all the same greatness of HTML5 and the amazing hardware acceleration capability. For video, this means three things:
1. Same markup: the same <video> HTML markup will run on bothIE9 desktop as well as on IE9 Mobile, i.e. the embedded video will play without any modification of your code.
2. Same format: IE9 on Mango will play HTML5 video in H.264, the most widely used video format on the mobile web. For a thorough treatment of the topic regarding IE9’s support for H.264, the IE blog has a few excellent posts here, here and here.
3. Same hardware acceleration: On Mango IE9, video playback is accelerated by the GPU on the device, the same way desktop IE9 video performance leverages the GPU.
Optimized Playback Experience
On top of the standards-compliant video HTML tag support, we designed the video viewing experience to be as simple and efficient as possible, while optimizing the viewing experience for small screens to be full-screen. As a result of this design, the controls attribute of the <video> tag is ignored because the full-screen native media player will always have the controls. The width and height attributes specify the width and height of the video thumbnail, and the poster attribute specifies where the thumbnail image comes from. For example, here is an example of a 300×180 video thumbnail:
When you see a HTML5 video thumbnail such as the one above on IE9 mobile, simply tap on it and the media player will start the playback in full screen mode. To exit the video, just press the “back” button or wait for the video to end and you’ll be returned to the web page that hosts the video.
Start Using HTML5 Video on Your Sites
If you are already using feature detection then you are all set – the video served up on your IE9 Mobile webpage will be HTML5-based. If your site is still doing User-Agent sniffing, then Charles has a great post on the IE9 Mobile UA that you can refer to for specific details. Unless you are tailoring your content for very specific browsers, we recommend websites to use feature detection on new HTML5 features, so that the same markup will work across different browsers. Here is a simple example of how to use the <video> tag with a fallback mechanism on browsers that do not support it:
<source src=”video.mp4″ type=”video/mp4″/>
This text only displays in browsers without video support.
You can refer to this IE blog post on detecting HTML5 video feature.
Flash / HTML5 Video Coexistence
For developers who want to target as many devices and platforms as possible, but don’t want to maintain multiple versions of the same website, it is possible to offer both Flash-based and HTML5 video in the same markup. This way, older browsers sans HTML5 video can play video using Flash, while modern browsers on either desktop or mobile platforms will happily recognize the <video> tag and start from there. Below is one example of how this can be done:
<video controls autoplay>
<source src=”video.mp4″ type=”video/mp4″/>
<embed src=”video.mp4″ type= “application/x-shockwave-flash” allowfullscreen=”true” allowscriptaccess=”always” />
That’s it. If you haven’t already, upgrade your retail device to the pre-release Mango build to start testing your sites with HTML5 video the Mango browser. You can also test on the latest emulator as well, but keep in mind that the emulator might not be able to decode H.264 due to platform differences. Let us know in the comments of any questions you have!
Some MSDN resources and blog posts on HTML5 video:
HTML5 – Internet Explorer 9 Guide for Developers
Same Markup: Using <canvas>, <audio>, and <video>
Follow Up on HTML5 Video in IE9
Another Follow-up on HTML5 Video in IE9
HTML5 and Web Video: Questions for the Industry from the Community
Program Manager, Windows Phone