Online Professional Quality Video: Premium media experiences without plug-ins in Internet Explorer 11
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
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) for adaptive streaming
- Encrypted Media Extensions (EME) for playback of protected content
- Simple Delivery Profile - US (SDP-US) for richly styled TTML captions
- Web Crypto for encryption features useful for security and authentication
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
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
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
Comments
Anonymous
September 05, 2013
The 48Hz screen refresh rate trick is soooo smart. Good job guys, this is this kind of little details that make the experience great.Anonymous
September 05, 2013
I can't wait to get a Surface Pro 2 to take full advantage of thisAnonymous
September 05, 2013
The 48Hz thing is smart. But - and there's always a but - 24fps material is sometimes 24fps but most commonly 23.976. You will still get judder if 23.976 material is played at 24 (or 48). So does IE11 (and other Windows 8.1 video-playing applications) handle the difference? It's only quite recent that display controllers have been able to generate this correct frame-rate, and I'm not even sure Windows has good support for 24 to 23.976 switching.Anonymous
September 05, 2013
The comment has been removedAnonymous
September 06, 2013
Anything that is IE-only will be left on the sideline by web developers. Promote it for the standard, push other browser vendors to implement it, if you honestly want developers to start using this. IE-only websites are a thing of the past.Anonymous
September 06, 2013
The comment has been removedAnonymous
September 06, 2013
@Martijn So, essentially, you didn't read the post at all, nor did you notice all of the links to w3.org Nice...Anonymous
September 06, 2013
@Henri Tuhola Same to you. What part of Standards bodies, working groups and links to w3.org don't you people understand?Anonymous
September 06, 2013
I hope you work with Time Warner Cable to have their "TWCTV" site work with this. Currently their site is based on Silverlight, which isn't supported by SurfaceRT, which means I can't watch TV on the go... like people with iPads and other tablets can. They aren't currently working on a WP8 or Windows 8 app, so we're depending on the browser here, and WindowsRT lets us down due to utter lack of Silverlight support.Anonymous
September 06, 2013
The comment has been removedAnonymous
September 06, 2013
@Fred, I agree. some people see IE label and jump to the comment section. Those are the people working for Google. Rest of the people just use IE to surf web securely, IE blocks Google Analytics' (and other mischievous ad agencies') tracking scripts and provide protection. This makes Google lose money. So they pay these cheap pseudo-geeks (living in mom's basement) to fend people away from friendly IE.Anonymous
September 06, 2013
@davis: Yes, 23.976 fps and other non-integer frame rates are supported. The design is not based on absolute FPS values. It is based on the per frame presentation durations.Anonymous
September 06, 2013
It is great that you are trying to do a lot for video and audio on the web. But it doesn't make sense when you start your post writing about "plug-in free audio and video streaming", and then you describe Encrypted Media Extensions (EME), which is ... a new mechanism for loading proprietary plug-ins! Where is the "plug-in free" in that? Using plug-ins for common things on the web was and still is a bad idea, and introducing new plug-ins is even worse. Please drop support for EME, as it is a setback, not an improvement.Anonymous
September 07, 2013
@Jesper Kristensen. you dont have any idea what are you talking about. Encrypted Media Extensions is W3's standard way of loading extensions which would work on all browsers. The point is we are talking about standard web. Your setback makes no sense.Anonymous
September 07, 2013
Sorry for being off topic but it seems that feed viewing in IE 11 preview is broken. For example, test this feed out: tirania.org/.../miguel.rss2 Instead of the actual posts, I get a dump of the feed's XML. I am using Win 7.Anonymous
September 07, 2013
@James, its .rss2 extension. Its supposed to behave like this. The output is consistent among IE9, 10, 11, Firefox and Chrome. The expected behavior is same as the actual behavior. So no issues there.Anonymous
September 07, 2013
The comment has been removedAnonymous
September 07, 2013
ITT: some intellectually challenged people screaming for IE implementing W3C standards. Why don't you go back to your basements?Anonymous
September 08, 2013
The comment has been removedAnonymous
September 08, 2013
They are pushing EME entirely too quickly, too early. Its going to create a huge problem once the standard is finalized and other browsers implement an entirely different spec. Meanwhile WebRTC is entirely ignored since MSFT's competing spec was denied because of unnecessary complexity, so they take the ball and run home.Anonymous
September 08, 2013
The comment has been removedAnonymous
September 09, 2013
i have no idea how i got to this page but all the nerd broke my brainAnonymous
September 09, 2013
i have no idea how i got to this page but all the nerd broke my brainAnonymous
September 09, 2013
@James/@Ray: The RSS feed in question is delivered with a response header "Content-Type: text/plain" which prevents it from rendering as an RSS feed. Remove this header or set it to "Content-Type: application/rss+xml" and it renders just fine.Anonymous
September 09, 2013
Why do dropdown lists (e.g. select elements) in IE10+ render with the correct single pixel border when rendering in Quirks Mode yet when running in Standards Mode they render with a 2-3px border that looks incredibly ugly and like a UI rendering error? PS It looks horrible on Windows 7 and Windows 8. Please fix this!Anonymous
September 09, 2013
The comment has been removedAnonymous
September 09, 2013
The comment has been removedAnonymous
September 09, 2013
The comment has been removedAnonymous
September 09, 2013
The comment has been removedAnonymous
September 09, 2013
"4.) If you can make an HTML5 experience for Netflix why can't you make an HTML5 YouTube app for your phones?" Because Google can't for Android or iOS. All they, Google, have been able to accomplish was just using the HTML5 tags for video and audio which IE 9+ can do and does do. Also the Netflix HTML5 experience is not entirely HTML5 dude, the video and audio part of NetFlix is HTML5, the rest of the site is not HTML5.Anonymous
September 09, 2013
The comment has been removedAnonymous
September 09, 2013
@Myself: ... or maybe MS and Adobe have understood something you haven't.Anonymous
September 10, 2013
Considering a dude whipped up a x86 emulator programmed in pure Javascript last year, the "Javascript isn't ready for complex applications" is really for someone who thinks "IE8 is teh standards dude!" Yes, you CAN do powerful stuff in Javascript - without the need for a plugin library specially compiled for your platform. A browser, and you're good to go. Wake up and smell the coffe, current browsers (well, not IE) can actually run applications such as immersive 3D first person shooters and fast-paced racing games! And, yes, video and audio playback too. True, media support in standards is still quite limited (multiple audio channels, subtitles, video incrustation, 3D etc. are very much WIP) - but they got there quite fast. At least, Mozilla and Google did - Microsoft might be able to deliver something this fall that is similar to what other browsers have been doing since, oh, 2011... After all, WebGL is sooo evil... Yeah, it's not Direct3D! And this comment form is still oh so nice.Anonymous
September 10, 2013
IE 10.0.9 for windows 7.Anonymous
September 10, 2013
@Adam > 1.) If you are going to use code samples you need to review them first! When were you planing > to declare the "that" variable? Adam, you definitely have a point here. This way of coding sure looks weird, questionable. Gérard TalbotAnonymous
September 10, 2013
The comment has been removedAnonymous
September 11, 2013
@Adam: The code sample was updated yesterday based on your comments. Thanks for the feedback.Anonymous
September 11, 2013
A non-standard feature in IE is a lot less damaging than all the -webkit- prefixed features in Chrome and Safari. I think I wrote maybe 10 lines of IE-exclusive code in the past year, but still have to use chrome and safari-specific code all the time.Anonymous
September 12, 2013
The comment has been removedAnonymous
September 13, 2013
Also why is it when I choose to see a feed from my list of feeds, it does not auto-refresh? I keep getting the older posts, until I manually refresh it or wait for a day or two. Shouldn't it always show the latest content if I click on it? It's like going to your history, opening an item and getting the older version of the page instead of the very latest. Why are feeds different? It's annoying.