shaka-player

What is shaka-player?

Shaka Player is an open-source JavaScript library for adaptive media streaming. It supports DASH and HLS formats and provides a wide range of features for media playback, including DRM support, offline storage, and live streaming.

What are shaka-player's main functionalities?

Basic Playback

This code demonstrates how to set up basic video playback using Shaka Player. It initializes the player with a video element and loads a DASH manifest.

const video = document.getElementById('video');
const player = new shaka.Player(video);

player.load('https://example.com/manifest.mpd').then(function() {
  console.log('The video has now been loaded!');
}).catch(function(error) {
  console.error('Error loading video', error);
});

DRM Support

This code demonstrates how to configure Shaka Player to support DRM (Digital Rights Management). It sets up license servers for Widevine and PlayReady and loads a DASH manifest.

const video = document.getElementById('video');
const player = new shaka.Player(video);

player.configure({
  drm: {
    servers: {
      'com.widevine.alpha': 'https://example.com/widevine_license',
      'com.microsoft.playready': 'https://example.com/playready_license'
    }
  }
});

player.load('https://example.com/manifest.mpd').then(function() {
  console.log('The video with DRM has now been loaded!');
}).catch(function(error) {
  console.error('Error loading video with DRM', error);
});

Offline Storage

This code demonstrates how to use Shaka Player's offline storage feature. It initializes the storage module and stores a DASH manifest for offline playback.

const video = document.getElementById('video');
const player = new shaka.Player(video);
const storage = new shaka.offline.Storage(player);

storage.store('https://example.com/manifest.mpd').then(function(content) {
  console.log('The content has been stored offline!', content);
}).catch(function(error) {
  console.error('Error storing content offline', error);
});

Live Streaming

This code demonstrates how to set up live streaming using Shaka Player. It initializes the player with a video element and loads a live DASH manifest.

const video = document.getElementById('video');
const player = new shaka.Player(video);

player.load('https://example.com/live.mpd').then(function() {
  console.log('The live stream has now been loaded!');
}).catch(function(error) {
  console.error('Error loading live stream', error);
});

Other packages similar to shaka-player

video.js

Video.js is a popular open-source HTML5 video player that supports a wide range of video formats and provides a plugin architecture for extending its functionality. Compared to Shaka Player, Video.js has a larger community and more plugins available, but it does not natively support DASH or HLS streaming.

hls.js

Hls.js is a JavaScript library that brings HLS (HTTP Live Streaming) to browsers with support for MSE (Media Source Extensions). It is specifically designed for HLS streaming, whereas Shaka Player supports both DASH and HLS. Hls.js is a good choice if you only need HLS support.

dash.js

Dash.js is an open-source reference client for the playback of MPEG-DASH content. It is maintained by the DASH Industry Forum and provides extensive support for DASH streaming. Compared to Shaka Player, Dash.js is more focused on DASH and may not have as many features for HLS or DRM.

README

Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted Media Extensions.

Shaka Player also supports offline storage and playback of media using IndexedDB. Content can be stored on any browser. Storage of licenses depends on browser support.

Our main goal is to make it as easy as possible to stream adaptive bitrate video and audio using modern browser technologies. We try to keep the library light, simple, and free from third-party dependencies. Everything you need to build and deploy is in the sources.

Platform and browser support matrix

Browser	Windows	Mac	Linux	Android	iOS⁶	ChromeOS	Other
Chrome¹	Y	Y	Y	Y	N	Y	-
Firefox¹	Y	Y	Y	untested⁵	N	-	-
Edge¹	Y	-	-	-	-	-	-
IE ≤ 10	N	-	-	-	-	-	-
IE 11	Y ⁴	-	-	-	-	-	-
Safari¹	-	Y	-	-	N	-	-
Opera¹	untested⁵	untested⁵	untested⁵	untested⁵	N	-	-
Chromecast²	-	-	-	-	-	-	Y
Tizen TV³	-	-	-	-	-	-	Y

NOTES:

• ¹: Only the latest stable version is tested and supported. Older releases may still be usable, and we will accept pull requests for them, but they will not be officially tested or supported.
• ²: Latest stable Chromecast firmware is tested. Both sender and receiver can be implemented with Shaka Player.
• ³: Tizen 2017 model is actively tested and supported by the Shaka Player team. Tizen 2016 model is community-supported and untested by us.
• ⁴: IE 11 offers PlayReady support on Windows 8.1 and Windows 10 only. IE 11 can play clear content on Windows 8.0. IE 11 does not support adaptive playback on Windows 7 and under.
• ⁵: These are expected to work, but are not actively tested by the Shaka Player team.
• ⁶: All iOS browers use the same HTML engine (Apple WebKit) and are not supported because they lack MediaSource support. For more information, see: https://github.com/google/shaka-player/issues/997

Manifest format support matrix

Format	Video On-Demand	Live	Event	In-Progress Recording
DASH	Y	Y	-	Y
HLS	Y	Y	Y	-

You can also create a manifest parser plugin to support custom manifest formats.

DASH features

DASH features supported:

• VOD, Live, and In-Progress Recordings (dynamic VOD content)
• MPD@timeShiftBufferDepth for seeking backward in Live streams
• Multi-period content (static and dynamic)
• Xlink elements (actuate=onLoad only, resolve-to-zero, fallback content)
• All forms of segment index info: SegmentBase@indexRange, SegmentTimeline, SegmentTemplate@duration, SegmentTemplate@index, SegmentList
• Multi-codec/multi-container manifests (we will negotiate support with the browser and choose the best ones)
• Encrypted content (including custom ContentProtection schemas, PSSH in the manifest)
• Key rotation
• Trick mode tracks

DASH features not supported:

• Xlink with actuate=onRequest
• Manifests without any segment info: https://github.com/google/shaka-player/issues/1088
• Changing codecs during a presentation (unsupported by MSE)
• Multiple trick mode tracks for the same resolution at varying framerates or bitrates

HLS features

HLS features supported:

• VOD, Live, and Event types
• Encrypted content with Widevine
• ISO-BMFF / MP4 / CMAF support
• MPEG-2 TS support (transmuxing provided by mux.js, must be separately included)
• WebVTT and TTML

HLS features not supported:

• Encrypted content with FairPlay: https://github.com/google/shaka-player/issues/382
• Encrypted content with PlayReady: https://github.com/google/shaka-player/issues/1145
• Key rotation: https://github.com/google/shaka-player/issues/917
• I-frame-only playlists: https://github.com/google/shaka-player/issues/742
• CEA-608/708 captions: https://github.com/google/shaka-player/issues/276
• Raw AAC (without an MP4 container): https://github.com/google/shaka-player/issues/1083

DRM support matrix

Browser	Widevine	PlayReady	FairPlay	ClearKey⁷
Chrome¹	Y	-	-	Y
Firefox²	Y	-	-	Y
Edge³	-	Y	-	-
IE 11⁴	-	Y	-	-
Safari	-	-	N ⁵	-
Opera	untested⁶	-	-	untested⁶
Chromecast	Y	Y	-	untested⁶
Tizen TV	Y	Y	-	untested⁶

Other DRM systems should work out of the box if they are interoperable and compliant to the EME spec.

NOTES:

• ¹: Only official Chrome builds contain the Widevine CDM. Chromium built from source does not support DRM.
• ²: DRM must be enabled by the user. The first time a Firefox user visits a site with encrypted media, the user will be prompted to enable DRM.
• ³: PlayReady in Edge does not seem to work on a VM or over Remote Desktop.
• ⁴: IE 11 offers PlayReady support on Windows 8.1 and Windows 10 only.
• ⁵: FairPlay DRM support in Safari is a work in progress due to a lack of documentation. For more information, see https://github.com/google/shaka-player/issues/382
• ⁶: These are expected to work, but are not actively tested by the Shaka Player team.
• ⁷: ClearKey is a useful tool for debugging, and does not provide actual content security.

Media container and subtitle support

Shaka Player supports:

• ISO-BMFF / CMAF / MP4
  • Depends on browser support for the container via MediaSource
  • Can parse "sidx" box for DASH's SegmentBase@indexRange and SegmentTemplate@index
  • Can find and parse "tfdt" box to find segment start time in HLS
• WebM
  • Depends on browser support for the container via MediaSource
  • Can parse cueing data elements for DASH's SegmentBase@indexRange and SegmentTemplate@index
  • Not supported in HLS
• MPEG-2 TS
  • With help from mux.js, can be played on any browser which supports MP4
  • Can find and parse timestamps to find segment start time in HLS
• WebVTT
  • Supported in both text form and embedded in MP4
• TTML
  • Supported in both XML form and embedded in MP4

Subtitles are rendered by the browser by default. Applications can create a text display plugin for customer rendering to go beyond browser-supported attributes.

Important Links

• hosted demo (sources in demo/)
• hosted builds on cdnjs
• hosted builds on Google Hosted Libraries
• announcement list (join for release and survey announcements)
• hosted API docs
• tutorials

Contributing

If you have improvements or fixes, we would love to have your contributions. Please read CONTRIBUTING.md for more information on the process we would like contributors to follow.

FAQ

For general help and before filing any bugs, please read the FAQ.

Changelog

2.2.8 (2017-12-06)

Bugfixes:

• Do not allow seeking/startup at duration (bump back by 1s)
  • https://github.com/shaka-project/shaka-player/issues/1014
• Don't wait for sessions to close on DrmEngine.destroy
  • https://github.com/shaka-project/shaka-player/issues/1093
  • https://github.com/shaka-project/shaka-player/pull/1168
• Do not clear buffers on configuration changes unless required
  • https://github.com/shaka-project/shaka-player/issues/1138
• Ignore unsupported STYLE blocks in WebVTT
  • https://github.com/shaka-project/shaka-player/issues/1104
• Fix a null exception in CastReceiver.destroy

Demo app:

• Fix "ended" video control state on IE
  • https://github.com/shaka-project/shaka-player/issues/979
• Fix updates to demo app URL hash on Edge & IE 11
  • https://github.com/shaka-project/shaka-player/issues/1111
• Fix demo app page-load race on IE 11