Get ready for plug-in free browsing
Starting with Windows 8, IE is one web platform that provides two browsing experiences: the new IE in the new Windows UI optimized for touch devices, and the traditional browsing experience of Internet Explorer for the desktop. As a Windows app, Internet Explorer runs without plug-ins so that you have a clean, fast, and secure web browsing experience, while also providing a native Adobe Flash player. By removing plug-in dependencies from their sites and opting instead for analogous standards-based technologies, web developers can benefit from better site interoperability and easier maintenance. Here we offer guidance and strategies for preparing your sites and web applications for plug-in free browsing in IE.
Plug-ins and the modern web
Browser plug-ins are compiled third-party software components that extend the functionality of web content by calling into low-level browser interfaces. In Internet Explorer, plug-ins take the form of ActiveX objects and Browser Helper Objects (BHOs). Two commonly used plug-ins on the web today are the Flash Player and Skype Click to Call, which on Internet Explorer install as a Microsoft ActiveX object and a Browser Helper Object (BHO), respectively. Other common browser plug-in technologies include Microsoft Silverlight, Apple QuickTime, and Java applets. Like Flash, these technologies provide an application framework and runtime for web developers to write plug-ins that extend the functionality of their sites and web applications.
From the early history of the web, browser plug-ins have played a vital role by enabling rich online multimedia experiences and complex web application functionality. However, along with these capabilities, plug-ins can come with some disadvantages. Because plug-ins are essentially applications that run inside the browser, they consume additional system resources and expose additional attack surface to security risks. Also, plug-ins are not designed for touch, and because they are separate applications from the browser itself, they don't benefit from any changes coming with Internet Explorer 10 and later that make websites work smoothly with touch. Finally, plug-ins are based on proprietary technologies and are written with variable code quality, making it difficult to predict or control their support across different browsers and operating systems.
Fortunately, the web has come a long way since its early days, and standards-based technologies specified the World Wide Web Consortium (W3C) like the ones comprising HTML5 offer similar capabilities to various plug-ins. These technologies have strong support across modern web browsers, making it possible for web developers to write the same markup and script that works across all modern browsers, without writing or maintaining any additional code that has third-party framework and runtime dependencies.
Essentially, standards-based, plug-in free websites benefit:
- Consumers, with better performing browsing experiences, longer battery life on mobile devices, and increased security, privacy, and reliability;
- Web developers, with wider site interoperability across browsers and devices, better forward-compatibility, and overall easier site maintenance; and
- The modern web, by promoting and populating a more open, accessible, and vendor-neutral web.
For these reasons, IE on Windows 8 provides a plug-in free experience, and an ever-growing number of top sites around the world do too. There is already a considerable number of consumer devices and browsers on them that don't support plug-ins. Despite these trends and benefits, some consumer sites and line-of-business web applications might still require plug-ins. The last section of this article discusses fallback techniques and mitigation strategies to help users easily switch to Internet Explorer for the desktop to view plug-in dependent sites.
Going plug-in free
Windows Internet Explorer 9 and later desktop versions of IE also provide a way to view the web without plug-ins using ActiveX filtering. Because IE on Windows 8 runs plug-in free, it provides a great test bed with which to develop new plug-in free sites and convert plug-in dependent sites to use standard technologies.
The following table summarizes the most common uses of plug-ins, examples of older plug-in based technologies, and their standards-based equivalents available in Internet Explorer 10 and later.
| Capability | Example of plug-in based technology | Standards-based equivalent technologies | More info |
|---|---|---|---|
| Video and audio | Flash, Apple QuickTime, Silverlight | HTML5 video and audio | Video, Audio |
| Graphics | Flash, Apple QuickTime, Silverlight, Java applets | HTML5 canvas, Scalable Vector Graphics (SVG), Cascading Style Sheets, Level 3 (CSS3) Transitions and Animations, CSS Transforms, WebGL | Canvas, SVG, Transitions, Animations, Transforms, WebGL |
| Offline storage | Flash, Java applets, Google Gears | Web storage, File API, IndexedDB, Application cache API | Web Storage, File API, IndexedDB, Application Cache API |
| Network communication, resource sharing, file upload | Flash, Java applets | HTML5 Web Messaging, Cross-origin resource sharing (CORS) | Channel messaging, XMLHttpRequest |
Video and audio
One of the most common uses of plug-ins is for embedding rich audio and video content in webpages using media players like the Flash Player. However, that trend is now changing with the development of HTML5 video and audio specifications and their growing support across modern browsers. Support for the HTML5 video and audio elements has been available since Internet Explorer 9. Internet Explorer 10 added support of the HTML5 track element for use in video captioning. With Internet Explorer 11, media streaming and content protection are supported on HTML5 media elements through Media Source Extensions and Encrypted Media Extensions, respectively. The "HTML5 Video" section discusses support in further detail.
Graphics
Plug-ins have also been used to provide animated and graphically-rich interactive games and multimedia advertisements. Since Internet Explorer 9, Internet Explorer offers a host of standards-based, hardware-accelerated graphic technology alternatives, including HTML5 canvas, SVG, and CSS3 2D transforms. Internet Explorer 10 adds support for SVG filter effects, CSS3 transitions and animations, and CSS3 3D transforms, and IE11 adds support for WebGL.
Offline storage
Many web applications require access to data files, and in the past, this meant requiring access to remote servers storing these files. But this, in turn, requires network connectivity, and in order to be viable alternatives to desktop client applications, web applications need to also work offline. Plug-ins like Java applets and Google Gears initially stepped in to fulfill the offline storage needs of web applications, but now World Wide Web Consortium (W3C) standards-based alternatives are available. Web storage has been supported since Windows Internet Explorer 8, and Internet Explorer 10 introduces support for File API, IndexedDB, and the Application Cache API, opening up all kinds of new possibilities for building offline experiences.
Network communication, resource sharing, file upload
Modern websites and apps are all about social interactions and sharing, which often requires that separate websites are able to safely and swiftly communicate and upload and share data. In the past, developers have sometimes needed to use plug-ins like Flash for making cross-domain HTTP requests when the Internet Explorer XDomainRequest object could not provide the functionality they needed. In other instances, developers might have used a Flash- or Silverlight-based plug-in when their web applications required support for multiple file uploads, uploading files on a background thread, or displaying file upload or download progress. All that has changed with Internet Explorer 10, which supports the Cross-Origin Resource Sharing (CORS) standard for XMLHttpRequest (XHR), XHR progress events, and web workers. In the area of HTML5 Web Messaging, IE8 introduced cross-document messaging with the postMessage method and onmessage event, and Internet Explorer 10 adds support for channel messaging.
HTML5 video
The future of video on the web is HTML5; however, there are several things to keep in mind as the related standards are being defined and browser vendor implementations converge on baseline levels of support.
Encoding
There are three major video encoding formats supported by the HTML5 video tag: H.264, VP8, and Theora. The H.264 format, also known by the .mp4 file format, is the most widely used video encoding format on the web today, and in addition to the HTML5 video tag, is also supported on every Blu-ray digital video disc (DVD) player, most Flash and Silverlight players, and a significant share of mobile devices.
There are other benefits to the H.264 format as well. You can use video taken directly from your camera on the web without having to encode it. Also, H.264 video has vastly better hardware support than any other video codec, making it possible to get great HD video performance on a low-end machine with H.264 decoding happening directly in the CPU. The same video in a different encoding might likely require additional software support to run and thus be much slower and power intensive.
Not all the leading browsers have built-in support for the H.264 format. Currently the Firefox and Opera web browsers only natively support the VP8 (or .webm file) and Theora (or .ogg file) formats. Firefox has support for H.264, though it doesn't actually ship with H.264, rather it relies on built-in support on Windows and other host operating systems. Google Chrome had announced plans of dropping H.264 support, but it still supported at the time of this writing. To work around these differences and ensure that your HTML5 video works across all browsers, the best practice is to provide multiple encodings of your video with the HTML5 source element. For example:
<video id="video1">
<source src="slideshow.mp4" type="video/mp4">
<source src="slideshow.webm" type="video/webm">
</video>
This table summarizes the primary HTML5 video formats and their current levels of support across major browsers.
| Video encoding | Audio encoding | File format | Windows Internet Explorer | Safari (for Windows, Mac, iPhone, iPad) | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|
| H.264 | AAC | .mp4 | IE9+ | Safari 4+ | Chrome 3.0.182.2+² | Firefox 21+³ | (requires plug-in) |
| VP8 | Vorbis | .webm | (requires Windows codec)¹ | (requires plug-in) | Chrome 6.0.422+ | Firefox 4+ | Opera 10.60+ |
| Theora | Vorbis | .ogg | (requires plug-in) | (requires plug-in) | Chrome 3.0.182.2+ | Firefox 3.6+ | Opera 10.50+ |
¹IE support for playing .webm videos doesn't require a browser plug-in, but does require users to install the free VP8 codec for Windows.
²Google Chrome announced plans on dropping the H.264 format in the future, but support still remains at this time.
³H.264 support on Windows 7 (and above) was introduced in Firefox 21, and for Linux in Firefox 24.
To make sure your HTML5 video and audio plays across different browsers, see "Practical Cross-Browser HTML5 Audio and Video".
Streaming and Digital Rights Management (DRM)
Video can be either live (streaming), or on demand (played from a file on a web server). Starting with IE11, IE supports both on demand and streaming HTML5 video, as well as Digital Rights Management (DRM).
IE11 on Windows 8.1 supports W3C Media Source Extensions (MSE) for HTML5 live streaming (or adaptive bandwidth) HTML5 video, where video quality can be raised or lowered based on the efficiency of the network. This provides an alternative to proprietary, adaptive streaming technologies that are used over the web today.
IE11 on Windows 8.1 also supports W3C Encrypted Media Extensions (EME) to enable protected content playback through HTML5 video. IE11 supports the PlayReady DRM system.
Note Media Source Extensions and Encrypted Media Extensions are not supported in IE11 on Windows 7.
MPEG-DASH is an emerging standard for Internet streaming, and MSE and EME in IE11 are compatible with both MPEG-DASH content and also ISO BMFF content (the base format for common media file types). For more info on implementing a DASH client to take advantage of MSE and EME, see Building Media Streaming Apps and Sites Without Plug-Ins using MPEG-DASH (MSDN Channel 9 video) and the DASH Industry Forum’s DASH.js reference implementation (GitHub repository).
Dynamic TextTrack and styling captions
Internet Explorer 10 introduced file-based TextTrack support for WebVTT and TTML formats of track files. Track files, like video files, require the server to provide a MIME type header for WebVTT or TTML based files. IE11 extends HTML5 video's TextTrack support to include creating TextTrack and TextTrackCue objects programmatically, to dynamically build video caption tracks. Using the addTextTrack and addCue methods, you can create and add new tracks to a running video. IE11 also supports Simple Delivery Profile (SDP) to let you create TTML track files that locate text anywhere on the video player, and control fonts, colors, and styles for more readable or interesting closed caption text on the video player.
For more on video support, see Simple Delivery Profile (SDP) or Dynamic TextTracks in the IE11 Developer Guide.
Using plug-ins as a last resort
For optimal future proofing and browser compatibility, it's best to develop your site entirely without using plug-ins. In some cases, however, it might not be possible for a website or web app to work completely without plug-ins. In these instances, there are some fallback techniques and mitigation strategies you can follow to ensure the best possible experience for users of Internet Explorer 10 and other plug-in free browsers.
Selectively serving up plug-ins
There is no programmatic way to know if your website or app is being viewed on Internet Explorer 10 and later in the new Windows UI or on the desktop: the user-agent string is the same. However, this is not a useful distinction anyway, as both experiences run off the same HTML5 and script engines, and IE might be running with ActiveX filtering. When planning your plug-in free fallback strategy, the best practice for ensuring site compatibility across Internet Explorer 10 experiences and other plug-in free browsers is to detect features instead of browsers. Using feature detection, your site can check if a particular feature is supported in the client browser, and if not, offer plug-in based functionality in its place.
This example uses HTML element fallback to provide a plug-in solution for browsers that don’t support the HTML5 video element.
<video id="video1" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">
<p>Please update your browser or install Flash</p>
</object>
</video>
This next example uses JavaScript-based fallback to provide a plug-in solution for browsers that don’t support native XMLHttpRequest (XHR).
// Best Practice: Use Native XHR, if available.
if (window.XMLHttpRequest) {
// If IE7+, Gecko, WebKit: Use native object.
var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// ...if not, try the ActiveX control.
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
// No XMLHTTPRequest mechanism is available.
}
Conversely, if your site offers a richer experience with a particular plug-in, you could check to see if the plug-in was loaded, for example via the readyState property of its host object element, and then fall back to a plug-in free experience as needed. For more info and code examples on fallback strategies, see Plugins and ActiveX controls in the IE Compatibility Cookbook.
Using the Compatibility View (CV) list to play Flash content
On Windows 8, Internet Explorer 10 provides an integrated Flash Player, removing the need to download or install an additional player. While any site can play Flash content in Internet Explorer for the desktop, only sites that are not listed in the NoFlash section of the Compatibility View (CV) list can play Flash content within Internet Explorer in the new Windows UI. (Being listed in the NoFlash section does not affect a site’s document mode.) Sites with Flash content are only placed on this list if they have known security or reliability issues. Developers can also request that their site is considered for removal from the CV list for Flash. For more info, see "Developer guidance for websites with content for Adobe Flash Player in Windows 8".
Switching to the desktop when all else fails
To ensure forward-compatibility for your site and the best experience for the widest user audience in the long term, it's best to build new sites and retrofit existing sites without using plug-ins. In cases where this is not possible, consider either migrating your site to a Windows Store app or writing code for a Windows Store app using a custom Windows Runtime object in place of the functionality provided by the plug-in, and then connecting your site to your Windows 8 app.
In the short-term, Internet Explorer 10 provides the requiresActiveX feature switch that, if enabled, displays a notification prompting users to switch to the desktop:
.png)
Use the requiresActiveX switch only when the lack of a plug-in would break your website. Here is how the notification works:
- Notifications are displayed one time per hostname visit, per browser tab
- The notification appears again if the user refreshes the page
- The notification doesn't block the user from interacting with the site (it is non-modal)
- Pages loaded in sub-frames will not trigger the notification
Providing your users with the option to switch to Internet Explorer for the desktop is a short-term mitigation for site-compatibility issues, and not a long-term solution. The desktop browsing experience and most plug-ins were not designed for smaller screens, battery constraints, and no mouse.
This table lists the different ways you can enable the requiresActiveX switch.
| Ways to enable requiresActiveX feature switch | Managed by |
|---|---|
| HTTP header / meta tag | Web developer |
| IE10 Compatibility View (CV) list | Microsoft |
| Group policy CV list settings | System Administrator |
Keep in mind that Windows RT, doesn't support running, emulating, or porting existing x86/64 desktop apps. The Building Windows 8 blog provides more information.
HTTP header and meta tag
As a web developer, you can enable the requiresActiveX feature switch either by using this HTTP header:
X-UA-Compatible: requiresActiveX=true
Or by using this meta element on each affected webpage:
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
Compatibility View list
Microsoft maintains a Compatibility View (CV) list of known sites that require ActiveX. These sites can be listed by domain or subdomain. For example:
<domain docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">contoso.com</domain>
<domain docMode="EmulateIE7" versionVector="7" uaString="7">
fabrikam.com
<path docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">/tv</path>
<path docMode="EmulateIE7" featureSwitch="requiresActiveX:true" versionVector="7" uaString="7">/video</path>
</domain>
A separate, hostname-only compatibility view list is supported via Group Policy to trigger the same notification as the one triggered based on Microsoft’s public CV list.
You can use F12 Developer Tools to determine if your site is on the IE CV list. If your site is listed as “requiresActiveX:true” but you’ve recently eliminated its plug-in dependency, the IE10 compatibility list setting can be overridden with an HTTP header or meta tag specifying requiresActiveX=false. For more info about the CV list, see "Understanding the Compatibility View List".
Getting your site ready for the plug-in free web
An ever-increasing amount of websites, web apps, browsers, and devices are going plug-in free, to the benefit of consumers, web developers, and the modern web as a whole. The best practices for preparing your sites and web apps for plug-in free browsing in IE are to replace critical plug-in functionality with standards-based technologies, selectively serve up plug-ins only when there are no standards-based alternatives, and only prompt users to switch to the desktop as a last resort. By following these guidelines, you can provide the best possible browsing experience for the widest possible audience and ensure that your site works great with IE.
Related topics
ActiveX Filtering for Consumers
Windows 8 browsing and plug-in free HTML5