HTML5 Video Support in IE9 Mobile

HTML5 Video Support in IE9 Mobile

  • Comments 7
  • Likes

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 300x180 video thumbnail:

image

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:

<video>

<source src="video.mp4" type="video/mp4"/>

This text only displays in browsers without video support.

</video>

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"/>

<object>

    <embed src="video.mp4" type= "application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" />

</object>

</video>

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

HTML5 Audio and Video

Same Markup: Using <canvas>, <audio>, and <video>

HTML5 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

Rick Xu

Program Manager, Windows Phone

7 Comments
You must be logged in to comment. Sign in or Join Now
  • Hi Rick,

    - The Video tag is not working for me on windows phone emulator.

    - I have tried formats like mp4,webm and mp4 ,but it only shows the control and keeps telling loading,is there anything that I am dng wrong or something.Thanks in advance :)

    peace,

    Nitin

  • yagnaum
    1 Posts

    www.Yagnaum.com – the leading software development company providing custom application Development services using PHP, .Net, Drupal, Microsoft, ATG, etc.

    Join Yagnaum at facebook @ www.facebook.com/.../129682527062459

  • I've been playing around with the HTML5 video tag on Windows Phone 7.5 this week but I find it's implementation to be too limiting for any of the scenarios where I would want to use it:

    (1) cutaway scenes or level transitions in games - which should autoplay and always be done without IE video controls present, and preferably allow the XNA game to draw over the video.  The implementation should allow transitions, so that the developer has control of the size and location of the video rectangle, to allow sliding and fading of the video rectangle, as most other "pages" are implemented in professional-looking WP7 games.

    (2) putting the video on an XNA game's 2D/3D texture (non-fullscreen) - like on an in-game 3D billboard or TV, or at least on a 2D rectangle - in order to make a video within an advertising-control.  I am making an advertising SDK for XNA and Silverlight, and I'd also like to support HTML5 ads in it too.  This would support video ads that aren't fullscreen and that autoplay (autoplay is another property that isn't working in IE9 for WP7.5).

    I've also found that unlike on my Windows 7 IE9 browser, the WP7.5 version seems to sometimes lose the video (it shows up all black) while playing the audio only.  Not sure why that happens, but it's annoying.

    It's great that HTML5 video tag has been incorporated into IE9 for WP7.5, but without supporting more video tag properties, it's fairly useless to me (and probably to most other XNA on WP7.5 developers).  Hopefully someone at Microsoft that is responsible for HTML5 support in IE on WP7.5 will ad these two things to their list of use-case scenarios to support in the near-future.

  • Arvid
    22 Posts

    I have been using the Rosetta Stone Greek lessons for the past few months in preparation of an upcoming vacation. I feel comfortable that I will be able to increase my vacation understanding and enjoyment after these studies. In the past I have always been able to learn a minimum to get me through a foreign country, this time I plan to be able to do more. As a history buff, www.hellorosettastone.com it will be interesting to listen to the stories in the native language instead of only the English translation. Bartering with sales people should also be easier. Rosetta Stone has been easy and fun to use.

  • How about a live streaming video support?

  • abm
    268 Posts

    @ SamJost, Windows Live Movie Maker downloads.live.com

    @Rick, mind if I explain a scenario in which WP-IE9 doesn't work as expected:

    1. Browse to windowsteamblog.com using WP7.5.

    2. Sign in and click on your name at the top-right corner.

    3. Click on a person name who you have added as a friend.

    4. You can find it where its written like "Rick Xu and Tom Warren are now friends.” So Tom Warren is the name, when you click on it you will goto his profile page.

    5. Click on Start conversation (under avatar) a popup will appear.

    6. Now try to enter the subject and the message.

    Yes you will find yourself in an impossible situation. I hope you guys sort it out quickly and give us a quick update on that one to prevent the WP users from experiencing such an ordeal anywhere else.

    Thank you and keep coming the great work :-)

  • SamJost
    4 Posts

    Ver nice!

    Do you have any good recommendation for a tool to convert video to H.264?