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

Comments (40)

  1. Anonymous says:

    The 48Hz screen refresh rate trick is soooo smart. Good job guys, this is this kind of little details that make the experience great.

  2. Anonymous says:

    I can't wait to get a Surface Pro 2 to take full advantage of this

  3. Anonymous says:

    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.

  4. Anonymous says:

    Great news. Please show some love to Windows Phone as well. The standard H.264 "LIVE" streams are unable to play on IE10 mobile. I tested with Cisco camera. stackoverflow.com/…/863980 (its being a while now)

    I tried building the custom app and a web app using Microsoft Media Platform: Player Framework, but it didn't work. I tried the direct URL of the raw stream from the camera in IE10 mobile, it didn't work either. In IE10 mobile, the error says:

    "Sorry, we can't play this file on your phone"

    When this was happening, the same URL was working in IE10 metro and desktop on Windows 8 and IE9 on Windows 7. In Android, a third party browser was able play the raw stream as is. Rest of the browsers in Android and iOS worked with Player Framework library used on a page.

    The ASF (for live) and AVI (for deferred playback) containers are Microsoft's own creations and yet among big three, Windows Phone is the only OS which is unable to play live streams.

    On a very different note: is there any plan for bringing File Uploading in IE mobile? The [input type=file] is broken. At least it should degrade gracefully and show the notification that Windows Phone doesn't support file uploading. Suppose I took a picture from Nokia Lumia 1020, and now I cannot upload it to my blog without PC intervention. All the messaging, social media and FTP apps has file sharing feature. Please implement the WP native file API for HTML5 file uploading. For mobile responsiveness, the drag drop file uploading (like on Skydrive.com) might have a multi-file uploading fallback.

    Thank you!

  5. Anonymous says:

    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.

  6. Anonymous says:

    Pathetic attempt to restore a vendor lock-in that should not exist in the first place. You know that vendor lock-in you created with Windows truly destroyed the company? You crushed your competition by doing so. Unfortunately, the competition grew back while you forgot how to compete.

    Yeah, partner with big media. Maybe they can help you collect your Microsoft tax so you could be sitting on your fat lazy asses for two additional years.

  7. Anonymous says:

    @Martijn So, essentially, you didn't read the post at all, nor did you notice all of the links to w3.org

    Nice…

  8. Anonymous says:

    @Henri Tuhola  Same to you. What part of Standards bodies, working groups and links to w3.org don't you people understand?

  9. pmbAustin says:

    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.

  10. Anonymous says:

    Ooooh, you really love those Digital Restrictions Management features, right… Go on, try to force them down the throat of anybody who doesn't remember the original Zune and the "Oops, sorry, all the songs you bought are now gone because we decided to shut down the servers with your ID keys, so long suckers!" Yay, long live DRM – not.

    Proprietary (i.e. unused outside of some of your partners website) features apart, IE11 is still slow-ass, and since it's not out on any major OS at the moment, it means it's outdated even before it's out.

    Come on, you were doing so well with 9 and 10! Concentrate on making a decent browser, THEN try to differenciate! You're doing it backwards! The burned earth tactic used against Netscape won't work this time – Firefox has a bigger annual budget than Netscape ever had, and Google can finance Chrome development out of spare change. And considering we're talking their main target market outlet, you bet they're not limiting themseves to that!

  11. Anonymous says:

    @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.

  12. Anonymous says:

    @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.

  13. Anonymous says:

    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.

  14. Anonymous says:

    @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.

  15. Anonymous says:

    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.

  16. Anonymous says:

    @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.

  17. Anonymous says:

    I can see the anti-MS ranters are out in full force in knee-jerk reaction fashion. Why don't you READ the article first THEN comment. You might learn something about some really cool technology.

  18. CvP says:

    ITT: some intellectually challenged people screaming for IE implementing W3C standards. Why don't you go back to your basements?

  19. Anonymous says:

    @Alex and Riasat: considering what I read in the W3C draft (it's a DRAFT, written by Microsoft, Google and Netflix, and pushed to the W3C for discussion, NOT a standard), for this "feature", not only is it incomplete, nebulous and far too permissive in its permission details to be implemented cleanly using only the proposed norm (making the first implementation the de-facto standard, and such are always found lacking – leading to years and years of having to deal with crappy websites that don't work; for relevant examples, see VML, ActiveX and attachEvent), it also hints strongly at deferring most of the process to the platform; which isn't bad in and of itself, but also a clear indication that:

    – the implementations coming from Google and Microsoft will be strongly tied to their respective OS: Windows and Android. I betcha this will leave all Apple users down in the lurch (because Apple will probably come up with its own interpretation, tied to its own service and content delivery infrastructures, will probably fail at it now that the Jobs Distorsion Field lacks its primary generator) but also users of all other alternate systems: Linux, FirefoxOS, Blackberry…

    – said implementations will probably be closed source, undocumented and covered by so many patents that it will result in a world cut in two: those that run the "proper" browser on the "proper" platform and watch the "proper" content – and the others.

    To sum it up, you'll only be able to watch Google-approved content on Android devices, Microsoft-approved content on Windows devices (because if Windows RT wasn't enough of a hint, you soon won't be able to install applications without going through a store on Windows), and Apple-approved content on Apple devices (got much luck running a REAL 3rd-party browser on non-jailbroken Apple hardware? I do mean a browser, not a Webkit control run through an app).

    This means that "minority" system users are told to f%ck off, second point is against every principle the Internet stands for.

    @ieblog : Please remember that even a first-year web designer is able to do a comment form that works. If the team that takes are of your website isn't able to solve it in over 8 years, maybe it's not Ballmer that should have been shown the door.

  20. Anonymous says:

    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.

  21. Anonymous says:

    New product, old tricks. Yes see the #Reality

  22. Anonymous says:

    i have no idea how i got to this page but all the nerd broke my brain

  23. Anonymous says:

    i have no idea how i got to this page but all the nerd broke my brain

  24. @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.

  25. Anonymous says:

    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!

  26. Anonymous says:

    1.) If you are going to use code samples you need to review them first! When were you planing to declare the "that" variable?

    2.) Pick a brace style! K&R is obviously the most popular but you couldn't even decide to use the opposite (braces always on new line) and you've once again posted a hodge podge mess.

    3.) Glad you worked with Netflix to add Digital Restrictions Management but in case you missed the memo there is no DRM in open standards on the open Web.

    4.) If you can make an HTML5 experience for Netflix why can't you make an HTML5 YouTube app for your phones?

    5.) You still haven't provided a clean uninstall path for IE11 on Windows 7.  Without this developers have no plan to update yet.

  27. Anonymous says:

    1.) If you are going to use code samples you need to review them first! When were you planing to declare the "that" variable?

    2.) Pick a brace style! K&R is obviously the most popular but you couldn't even decide to use the opposite (braces always on new line) and you've once again posted a hodge podge mess.

    3.) Glad you worked with Netflix to add Digital Restrictions Management but in case you missed the memo there is no DRM in open standards on the open Web.

    4.) If you can make an HTML5 experience for Netflix why can't you make an HTML5 YouTube app for your phones?

    5.) You still haven't provided a clean uninstall path for IE11 on Windows 7.  Without this developers have no plan to update yet.

    6.) Glad to see you still haven't fixed the IE Blog comment form! Congrats on ignoring your readers once again!

  28. Anonymous says:

    i want to download media flash player

  29. grauenwolf says:

    So friging what? I don't build lame video sites, I build rich client applications in Silverlight. And don't give me that HTML5 nonsense, JavaScript is not appropriate for complex applications and won't be for many, many years to come.

    Yet you still only support Flash on WinRT. We trusted you and this is how you repay us? Every customer that I've recommend Silverlight to is pissed off that we didn't use Adobe Flex instead.

    All hail the IE Engineering team, screwing it up for the rest of us for over a decade.

  30. Anonymous says:

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

  31. Anonymous says:

    @Jonathan Allen : haha, we didn't use Silverlight but we've used the future proof Flex ! Oh wait… Adobe is also screwing us with Flex VS HTML5…

    I agree with you HTML5 isn't made for rich applications, it's a job for Silverlight or Flex but Microsoft and Adobe can't understand  that.

  32. Anonymous says:

    @Myself: … or maybe MS and Adobe have understood something you haven't.

  33. Anonymous says:

    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.

  34. Anonymous says:

    IE 10.0.9 for windows 7.

  35. Anonymous says:

    @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 Talbot

  36. Anonymous says:

    @Adam, according to the best practices of JavaScript lang, "that" variable is alias for "this" to be used in subsequent nested scope. The code sample has first line declaring var that = this;

    @Gérard Talbot, what exactly is looking questionable in the way of writing their code? According to your activity trend on this site (mostly rants), everything that IE team does is questionable in your opinion, which ventures the question about your intentions!

  37. Anonymous says:

    @Adam:  The code sample was updated yesterday based on your comments.  Thanks for the feedback.

  38. Anonymous says:

    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.

  39. Anonymous says:

    @Michael – as you can see by @Jerry Smith (MSFT)'s comments this wasn't the case in the original sample.

    @Jerry Smith (MSFT) thank you for fixing the code – it means a lot to make sure the source samples on this blog are clean.

    On a related note, the code sample is using a variable width font declaration "'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif" to be specific.

    This makes it hard to read. In future if a fixed width font could be used it would make things a lot better.

  40. Anonymous says:

    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.