Online Professional Quality Video: Premium media experiences without plug-ins in Internet Explorer 11

IEBlog

Internet Explorer Team Blog

Online Professional Quality Video: Premium media experiences without plug-ins in Internet Explorer 11

  • Comments 40

Internet Explorer 11 introduces new plug-in free audio and video streaming that is based on the latest proposed extensions to the HTML5 video specifications and is built on the latest operating system media and power management capabilities. The new media features in Internet Explorer 11 and Windows 8.1 combine to achieve “Professional Quality Video” - Web video that is just as great for personal videos as it is for premium TV and movies.

With Professional Quality Video, streams start promptly and play smoothly. The best video quality possible with your device and network is automatically selected, and premium movies play just like any other video. Videos can be consumed at home or on the go. You can listen to quality audio for the full experience, or watch the video with captions for privacy. And, this great experience does not require you to sacrifice battery life.

You can see Professional Quality Video right now on Netflix.com. Netflix worked with Microsoft on a new version of their full premium video service built entirely on these new features. The result: The full Netflix website works without plug-ins using IE11 on Windows 8.1. To experience this for yourself, install the Windows 8.1 Preview, visit netflix.com, sign in or start a free trial, and watch your favorite movies or TV shows using this technology. Or visit the Netflix Demo on our Test Drive site for a free preview.

The Netflix Demo lets you try the Netflix plug-in free experience running on IE11
The Netflix Demo lets you try the Netflix plug-in free experience running on IE11

If you are interested in exploring video streaming in more detail, try the Professional Quality Video Test Drive demo as well. Using the Test Drive sample, you can interact with adaptive streaming while playing a selection of regular and protected media.


Explore Professional Quality Video in IE11 on IE Test Drive

IE11 Supports the Latest Media Specifications

Until recently, browsers did not support the full capabilities required for Professional Quality Video, so users had to install browser plug-ins such as Adobe Flash or Microsoft Silverlight. As a result, Web developers could not deliver video experiences that would easily interoperate across browsers.

To enable Professional Quality Video with HTML5 video, Microsoft is working in the W3C HTML Working Group, the Timed Text Working Group & the Web Cryptography Working Group. IE11 supports the latest updates from this work, including:

Media Source Extensions (MSE)

You’ve surely played progressive download videos before and seen what happens when the network can’t keep up with video playback. First, the player software waits while some content is buffered, and then playback starts. If network throughput can’t keep up with the video bitrate, the buffer eventually runs out of data, and playback pauses while more data is buffered. This means you wait for your video when you should be watching it. Often, you need to choose from several available video qualities. If you choose a quality that is too high, you either put up with frequent pauses to re-buffer or start over with a lower quality selection.

Adaptive streaming is an elegant solution to this problem, enabling a fluid and smooth video experience. The video service creates multiple bitrate representations of the content and can switch between them based on current network or video rendering capacity. That means the service can start with an intermediate quality and switch to a higher or lower quality based on current conditions. There is no more stopping to re-buffer.

var that = this;

console.log("Loading MEDIA segment from: " + seg.url);

this.appending = true;

this.activeDownload = downloadArrayBuffer(seg.url, null, function (data) {

if (data) {

that.eos = false;

that.sb.appendBuffer(data);

that.segCursor++;

} else {

that.appending = false;

}

});

Sample code that appends time indexed data onto an MSE source buffer

Media Source Extensions (MSE) support adaptive streaming for browsers by making a simple but powerful change to HTML 5 video. Instead of pointing to a media file as the video element source, MSE points at a buffer. Using source buffers, webpage JavaScript can append data in time segments and adjust the quality between segments as necessary. Data is allowed to play uninterrupted, and the highest possible video quality can be viewed.

With Windows 8.1 Preview installed, try the Professional Quality Video demo to explore MSE. It provides a slider that allows direct selection of various streaming bitrates, so you can see firsthand the fluid switching between quality levels that is possible with MSE adaptive streaming.

The Professional Quality Video Demo shows adaptive streaming and DRM playback
The Professional Quality Video Demo shows adaptive streaming and DRM playback

What about MPEG-DASH? MPEG-DASH is an emerging specification for Internet Streaming. MSE in Internet Explorer 11 on Windows 8.1 supports MPEG-DASH content that adheres to the ISO BMFF profiles defined in the specification. So MSE can be used to build an MPEG-DASH client entirely using HTML5 and JavaScript in the browser. A compatible DASH.js reference player has been developed with contributions from multiple companies, including Microsoft Open Tech.

Encrypted Media Extensions (EME)

EME takes the proprietary interfaces exposed by various Digital Rights Management (DRM) systems and abstracts them into common data exchanges and events. Under the covers, the DRM systems can maintain their unique capabilities and implementation details, like how and where digital licenses are stored. From the Web site’s perspective, the EME exchanges are common, and the JavaScript necessary to implement them is consistent.

New file formats offer help here as well. By using ISO MPEG Common Encryption, Web media services can set up uniform libraries that are compatible with more than one DRM solution. A service can choose to support more than one DRM to broaden the range of browser/DRM solutions that are compatible with its Web site, without having to re-encode their library for each DRM solution.

In EME, browsers connect to DRM providers through Content Decryption Modules (CDMs). The CDM in Internet Explorer 11 supports Microsoft’s PlayReady DRM, the same DRM supported for Windows 8 Apps, and also for a variety of devices via the PlayReady Porting Kit.

The Professional Quality Video Test Drive demo includes some DRM protected content. Browse the left column for files identified as protected and see how easily they can be played. Netflix uses EME in on their Test Drive demo and site as well.

Simple Delivery Profile – US

We’ve written before about the emerging Simple Delivery Profile – US specification that enables rich and engaging caption streaming. SDP-US gives you control over caption placement, presentation, font, font styles, font colors, font background, and window colors and transparencies. And you can move captions easily between various locations on the screen.

The Captions Demo on IE Test Drive shows rich styling capabilities
The Captions Demo on IE Test Drive shows rich styling capabilities

Internet Explorer 11 is the first major browser to fully support SDP-US. For devices that play Internet media, Internet Explorer 11 meets all of the FCC requirements that take effect in the United States starting in January, 2014. You can explore different caption presentations using the SDP-US Captions Test Drive demo.

Web Crypto

Internet Explorer 11 is also the first major browser to support the emerging Web Crypto specification. Though it is not strictly a media specification, Web Crypto is useful for device and user authentication, which makes it important for Professional Quality Video scenarios.

Web Crypto exposes a broad range of cryptographic capabilities to Web sites. The Web Crypto APIs can be used to generate cryptographically random numbers, create hashes, generate and verify signatures, and encrypt and decrypt data. Using Web Crypto, you can authenticate devices without deploying certificates from the server and can implement device counting strategies. In addition, you can send wrapped keys to your clients, and un-wrap those keys in the client without exposing the key material to the browser or your end-users. To try it out, check out the Password File Encryption Test Drive demo using Windows 8.1 and use it to encrypt and decrypt a file.

Windows 8.1 Enables Power-Efficient Media Streaming

Windows 8.1 has media capabilities that make Internet Explorer 11 more power efficient by taking full advantage of system hardware. Together, the browser and operating system enable Professional-Quality Video.

48 Hz Displays

Windows 8.1 is the first OS to support the automatic and seamless changing of the system refresh rate in response to on-screen content. If the system’s display panel reports that it is capable of seamlessly transitioning to lower refresh rates, the OS will automatically utilize this capability on behalf of XAML/HTML5-based apps. For example, during 24fps (film-content) full-screen video playback, the OS will lower the refresh rate from 60 Hz to 48 Hz without any interruption or indication the refresh rate has been changed. If the user exits video playback or brings up any other non-video content on screen, the refresh rate will immediately and seamlessly change back to 60 Hz to ensure that the UI/application remains responsive. This technique is used for both 24fps and 25fps video, and results in improved video quality due to the elimination of judder-inducing 3:2 pull-down. Furthermore, running at lower refresh rates reduces power consumption in both the CPU and the display panel. On typical tablets with supported display panels, power savings from this feature result in over 30 minutes of increased viewing time!

Full-Screen Playback Optimization

Most users watch long videos in full-screen, and Windows 8.1 performs additional optimizations in that mode. For example, when you are in full-screen video mode, the operating system will coalesce timers and park CPU cores to save power by matching the characteristics of the full screen video playback workload. In addition, Internet Explorer 11 supports the HTML Full Screen API, making it simple for your Web site to fill the screen during video playback.

Power-Efficient Streaming

Windows 8.1 and Internet Explorer 11 also optimize the download and delivery of streaming media. XHRHttpRequests can now save power by transferring data directly to memory without first caching to disk. To further enhance power savings, MSE enabled streams automatically use audio offload hardware on systems that support this capability.

Summary

Professional quality online video is now a reality, enabled by emerging Web specifications implemented in IE11, and supported by Windows 8.1 operating system features for power-efficient video playback. Adaptive streaming, protected media playback, captioning and encryption expand the building blocks available for authoring Professional Quality Video Web sites. Read the specs, check out the demos and see for yourself how Internet Explorer 11 can help you build compelling online video experiences.

Please install the Windows 8.1 Preview from the Windows Store and try the combined browser and OS media experience in IE11. We look forward to your feedback, either through the IE11 Send Feedback tool or on Connect.

-- Jerry Smith, Senior Program Manager, Internet Explorer

  • Loading...