Internet Explorer on Windows Phone 8.1 adds new media features that greatly expand its support for HTML5 audio and video. Audio and video elements are now fully supported, including inline playback of video content, and adaptive streaming based on the latest Web specifications is supported as well. These new features provide Web site developers the tools they need to provide compelling media experiences, and make IE an ideal browser for mobile media applications.
Support for HTML5 Audio Video Specifications
Internet Explorer in Windows Phone 8.1 now provides full support for HTML5 media. Videos can play natively in the browser without plug-ins, and HTML5 media element events, attributes and properties are fully supported as well. Multiple audio elements can play simultaneously on a single page, making it possible to use HTML5 audio with games or interactive Web apps. And video playback works on a 512MB device. This is a mobile browser, after all!
One newly supported attribute is the Controls Attribute defined in the HTML5 specification. By using it, developers may elect to use the standard IE media playback controls rather than create custom ones.
Selecting Default Media Transport Controls Using the HTML5 Controls Attribute
Inline or Full screen playback
By default, videos in IE on Windows Phone 8.1 will play inline in the Web page. The standard playback controls include a full screen button, so that users can choose to play full screen whenever they want.
Inline Video Playback with Standard Media Controls including Full Screen Button
Inline video is a great fit for Web pages where video is accompanied by other content (article text, user comments, etc…) that users may want to view while the video is playing. Or sites might want to use a video element to play an animation within the context of other content. These scenarios are easily possible on Windows Phone 8.1 using inline video playback coupled with the HTML5 Video attributes such as controls, mute, autoplay and loop.
Some site designers might prefer to have video playback go directly to full screen. With IE on Windows Phone 8.1, they can use the FullSceen API to provide a true full screen-only experience. For example, Vimeo chose this approach in implementing their support for IE’s HTML5 features. They use the Full Screen API to go directly into full screen video playback when their custom “Play” button is pressed.
Media Source Extensions and MPEG-DASH
With the release of Windows 8.1 in 2013, Internet Explorer 11 expanded HTML5 media features to provide plug-in free audio and video streaming that achieved what we called Professional Quality Video– Web video that is just as great for personal videos as it is for premium TV and movies. Internet Explorer 11 achieved this support with a combination of new Web APIs (Media Source Extensions and Encrypted Media Extensions) and standardized formats (MPEG-DASH).
Now Internet Explorer on Windows Phone 8.1 supports Media Source Extensions as well. With it, sites will be able to deliver adaptive streaming videos using the same MPEG-DASH framework to Windows Phone 8.1 devices.
You can try adaptive streaming yourself by playing this Big Buck Bunny Video on our Test Drive site using Internet Explorer on Windows Phone 8.1. The video includes a slider control that lets you change video bitrate on the fly and see the effect on the rendered image a few seconds later.
To create your own adaptive streaming solution Web site, consider using the dash.js framework as a starting point.
Closed Captioning
Last, but not least, Internet Explorer on Windows Phone 8.1 also supports Closed Captioning using the W3C TTML Simple Delivery profile. This is the same caption format introduced with Professional Quality Video on Internet Explorer 11. Captioned videos you target at Internet Explorer 11 will now play on IE on Windows Phone 8.1 as well!
Call to Action
These improvements to the HTML5 audio and video platform for Windows Phone 8.1 make it possible to build great audio and video experiences for both the web browser and web apps.
Here are a few best practices to make sure your videos work correctly on Windows Phone 8.1:
- Avoid using an
overlaid on the video element to provide still preview of the upcoming video. This can work if video is played using an external app, but results in video playing behind the image with inline playback. Instead, use the HTML5 poster attribute to show an image before the video is loaded.
- Remember to use the controls attribute to use the default media transport controls if you are not building your own. Without these, your users won’t be able to control video playback.
- Make use of the FullSceen API to give users a full screen option with custom controls, or to launch your videos directly to full screen.
- Consider implementing MPEG-DASH for adaptive streaming using dash.js as a starting point.
As always, please send feedback to @IEDevChat or file a bug on Connect.
— Jerry D. Smith, Senior Program Manager, Internet Explorer