Tutorial: Porting and Browser Support

Philosophy

Shaka Player does not attempt to detect the browser vendor or version. Instead, we target certain standard or standards-track features and support the browsers that implement those features. Where necessary, we use polyfills to supplement native browser support on a case-by-case basis.

See the Polyfills tutorial if you are not already familiar with the term.

Required Features

Some features are required for basic operation.

• HTML5 video
• MediaSource Extensions (MSE)
• Promises
• Uint8Array
• CustomEvent constructor
  • polyfill provided to fall back on createEvent and initCustomEvent

Optional Features

Some features are optional, but enable the library to do more when present.

• Encrypted Media Extensions (EME)
  • required only for protected content
  • EME v0.1b polyfill provided for Chrome < 42
  • no-op polyfill provided for browsers without EME
• IndexedDB
  • required only for offline storage and playback
• WebVTT
  • required for subtitles
• getVideoPlaybackQuality
  • used by the library to collect QoE stats
  • polyfill provided for webKit prefixed version
  • no-op polyfill provided for browsers without
• fullscreen API
  • not used directly by the library, but useful for app developers
  • polyfill provided to unify major browser implementations

Testing for Support in an Application

To test for browser support in an application:

1. Load the library.
2. Install all polyfills via shaka.polyfill.installAll
3. Test for support via shaka.player.isBrowserSupported

Debugging Browser Support

We provide a support test page in the sources. This page does not rely on Shaka Player itself, and can be used as a standalone tool without compiling the code. Load support.html to see a detailed report for your browser. We host the latest release version of this page here.

This support report is a great place to start debugging browser support issues, and you should include it in any bug report about browser support. You can find the source for this report in support.js.

Adding Support with a New Polyfill

If you want to add support for a new browser via a new polyfill, please file an issue on github to track the work and discuss the implementation with us if need be.

A polyfill should only implement, patch, or rename one feature. In some cases, such as EME, this may be large with many parts to it. In other cases, it may be a fallback to some equivalent functionality using a different API. But please do not try to write a single polyfill to tackle many missing features at once.

Compatibility Tables