shaka-project / shaka-player

JavaScript player library / DASH & HLS client / MSE-EME player
Apache License 2.0
7.1k stars 1.33k forks source link
dash drm encrypted-media hls javascript live live-streaming media-source-extension mse offline offline-capable offline-mode playback playback-controls video video-playback video-player video-player-library video-streaming vod

Shaka Player

Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH, HLS and MSS) 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.

For details on what's coming next, see our development roadmap.

Maintained branches

See maintained-branches.md for the up-to-date list of maintained branches of Shaka Player.

Platform and browser support matrix

Browser Windows Mac Linux Android iOS >= 9 iOS >= 17.1 iPadOS >= 13 ChromeOS Other
Chrome¹ Y Y Y Y Native Native Native Y -
Firefox¹ Y Y Y untested⁵ Native Native Native - -
Edge¹ Y - - - - - - - -
Edge Chromium Y Y Y untested⁵ Native Native Native - -
IE N - - - - - - - -
Safari¹ - Y - - Native Y Y - -
Opera¹ Y Y Y untested⁵ Native - - - -
Chromecast². - - - - - - - - Y
Tizen TV³ - - - - - - - - Y
WebOS⁶ - - - - - - - - Y
Hisense⁷ - - - - - - - - Y
Xbox One - - - - - - - - Y
Playstation 4⁷ - - - - - - - - Y
Playstation 5⁷ - - - - - - - - Y

NOTES:

NOTES for iOS and iPadOS:

Manifest format support matrix

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

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

DASH features

DASH features supported:

DASH features not supported:

HLS features

HLS features supported:

HLS features not supported:

Supported HLS tags

For details on the HLS format and these tags' meanings, see https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis

Multivariant Playlist tags

- `#EXT-X-STREAM-INF:` `` - `#EXT-X-MEDIA:` - `#EXT-X-IMAGE-STREAM-INF:` - `#EXT-X-I-FRAME-STREAM-INF:` - `#EXT-X-SESSION-DATA:` - `#EXT-X-SESSION-KEY:` EME Key-System selection and preloading - `#EXT-X-START:TIME-OFFSET=` - `#EXT-X-CONTENT-STEERING:` Content Steering - `#EXT-X-DEFINE:` Variable Substitution (`NAME,VALUE,QUERYPARAM` attributes)

Media Playlist tags

- `#EXTM3U` - `#EXTINF:,[]` - `#EXT-X-PLAYLIST-TYPE:<type` - `#EXT-X-ENDLIST` - `#EXT-X-MEDIA-SEQUENCE=<n>` - `#EXT-X-TARGETDURATION=<n>` - `#EXT-X-DISCONTINUITY` - `#EXT-X-DISCONTINUITY-SEQUENCE=<n>` - `#EXT-X-BYTERANGE=<n>[@<o>]` - `#EXT-X-MAP:<attribute-list>` - `#EXT-X-KEY:<attribute-list>` (`KEYFORMAT="identity",METHOD=SAMPLE-AES` is only supports with MP4 segments) - `#EXT-X-PROGRAM-DATE-TIME:<attribute-list>` - `#EXT-X-START:TIME-OFFSET=<n>` - `#EXT-X-SERVER-CONTROL:<attribute-list>` - `#EXT-X-PART-INF:PART-TARGET=<n>` - `#EXT-X-PART:<attribute-list>` - `#EXT-X-SKIP:<attribute-list>` Delta Playlists - `#EXT-X-DATERANGE:<attribute-list>` Metadata - `#EXT-X-DEFINE:<attribute-list>` Variable Import and Substitution (`NAME,VALUE,IMPORT,QUERYPARAM` attributes) - `#EXT-X-GAP` - `#EXT-X-PRELOAD-HINT:<attribute-list>` - `#EXT-X-BITRATE` </details> <h2>MPEG-5 Part2 LCEVC Support</h2> <p><strong>Only supported on browsers with Media Source Extensions SourceBuffer support</strong></p> <ul> <li> <p>MPEG-5 Part2 LCEVC decoding support (decoding provided by <a rel="noreferrer nofollow" target="_blank" href="https://www.npmjs.com/package/lcevc_dec.js">lcevc_dec.js</a>, must be separately included)</p> </li> <li> <p>Integration documentation : <a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/docs/design/lcevc-integration.md">docs</a></p> </li> <li> <p>More on <a rel="noreferrer nofollow" target="_blank" href="https://www.lcevc.org">MPEG-5 Part2 LCEVC</a></p> </li> </ul> <h2>MSS features</h2> <p>MSS features supported:</p> <ul> <li>VOD</li> <li>AAC and H.264</li> <li>Encrypted content (PlayReady)</li> <li>TTML/DFXP</li> <li>Only supported with <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Dash-Industry-Forum/codem-isoboxer">codem-isoboxer</a></li> </ul> <p>MSS features <strong>not</strong> supported:</p> <ul> <li>Live</li> </ul> <h2>DRM support matrix</h2> <table> <thead> <tr> <th style="text-align: center;">Browser</th> <th style="text-align: center;">Widevine</th> <th style="text-align: center;">PlayReady</th> <th style="text-align: center;">FairPlay</th> <th style="text-align: center;">ClearKey⁶</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">Chrome¹</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">Firefox²</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">Edge³</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> </tr> <tr> <td style="text-align: center;">Edge Chromium</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">Safari</td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> </tr> <tr> <td style="text-align: center;">Opera</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">Chromecast</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">Tizen TV</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">WebOS⁷</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> </tr> <tr> <td style="text-align: center;">Hisense⁷</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> </tr> <tr> <td style="text-align: center;">Xbox One</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> </tr> <tr> <td style="text-align: center;">Playstation 4⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> </tr> <tr> <td style="text-align: center;">Playstation 5⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> <td style="text-align: center;">-</td> <td style="text-align: center;">untested⁷</td> </tr> </tbody> </table> <p>Other DRM systems should work out of the box if they are interoperable and compliant to the EME spec.</p> <p>NOTES:</p> <ul> <li>¹: Only official Chrome builds contain the Widevine CDM. Chromium built from source does not support DRM.</li> <li>²: 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.</li> <li>³: PlayReady in Edge does not seem to work on a VM or over Remote Desktop.</li> <li>⁶: ClearKey is a useful tool for debugging, and does not provide actual content security.</li> <li>⁷: These are expected to work, but are community-supported and untested by us.</li> </ul> <table> <thead> <tr> <th style="text-align: center;">Manifest</th> <th style="text-align: center;">Widevine</th> <th style="text-align: center;">PlayReady</th> <th style="text-align: center;">FairPlay</th> <th style="text-align: center;">ClearKey</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">DASH</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> </tr> <tr> <td style="text-align: center;">HLS</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;"><strong>Y</strong> ¹</td> <td style="text-align: center;">-</td> </tr> <tr> <td style="text-align: center;">MSS</td> <td style="text-align: center;">-</td> <td style="text-align: center;"><strong>Y</strong></td> <td style="text-align: center;">-</td> <td style="text-align: center;">-</td> </tr> </tbody> </table> <p>NOTES:</p> <ul> <li>¹: By default, FairPlay is handled using Apple's native HLS player, when on Safari. We do support FairPlay through MSE/EME, however. See the <code>streaming.useNativeHlsForFairPlay</code> configuration value.</li> </ul> <h2>Media container and subtitle support</h2> <p>Shaka Player supports:</p> <ul> <li>ISO-BMFF / CMAF / MP4 <ul> <li>Depends on browser support for the container via MediaSource</li> <li>Can parse "sidx" box for DASH's SegmentBase@indexRange and SegmentTemplate@index</li> <li>Can find and parse "tfdt" box to find segment start time in HLS</li> <li>For MSS, <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Dash-Industry-Forum/codem-isoboxer">codem-isoboxer</a> v0.3.7+ is required</li> </ul></li> <li>WebM <ul> <li>Depends on browser support for the container via MediaSource</li> <li>Can parse <a rel="noreferrer nofollow" target="_blank" href="https://www.webmproject.org/docs/container/#cueing-data">cueing data</a> elements for DASH's SegmentBase@indexRange and SegmentTemplate@index</li> <li>Not supported in HLS</li> </ul></li> <li>MPEG-2 TS <ul> <li>Can be played on any browser which supports MP4</li> <li>Can find and parse timestamps to find segment start time in HLS</li> </ul></li> <li>WebVTT <ul> <li>Supported in both text form and embedded in MP4</li> </ul></li> <li>TTML <ul> <li>Supported in both XML form and embedded in MP4</li> </ul></li> <li>CEA-608 <ul> <li>Supported embedded in MP4 and TS</li> </ul></li> <li>CEA-708 <ul> <li>Supported embedded in MP4 and TS</li> </ul></li> <li>Raw AAC <ul> <li>Supported in raw AAC container and transmuxing to AAC in MP4 container (depends on browser support via MediaSource).</li> </ul></li> <li>Raw MP3 <ul> <li>Supported in raw MP3 container and transmuxing to MP3 in MP4 container (depends on browser support via MediaSource).</li> </ul></li> <li>Raw AC-3 <ul> <li>Supported in raw AC-3 container and transmuxing to AC-3 in MP4 container (depends on browser support via MediaSource).</li> </ul></li> <li>Raw EC-3 <ul> <li>Supported in raw EC-3 container and transmuxing to EC-3 in MP4 container (depends on browser support via MediaSource).</li> </ul></li> <li>SubRip (SRT) <ul> <li>UTF-8 encoding only</li> </ul></li> <li>LyRiCs (LRC) <ul> <li>UTF-8 encoding only</li> </ul></li> <li>SubStation Alpha (SSA, ASS) <ul> <li>UTF-8 encoding only</li> </ul></li> <li>SubViewer (SBV) <ul> <li>UTF-8 encoding only</li> </ul></li> </ul> <p>Subtitles are rendered by the browser by default. Applications can create a <a rel="noreferrer nofollow" target="_blank" href="https://nightly-dot-shaka-player-demo.appspot.com/docs/api/shaka.extern.TextDisplayer.html">text display plugin</a> for customer rendering to go beyond browser-supported attributes.</p> <!-- TODO: replace with a link to a TextDisplayer tutorial --> <h2>Transmuxer support</h2> <p>Shaka Player supports:</p> <ul> <li>Raw AAC to AAC in MP4</li> <li>Raw MP3 to MP3 in MP4</li> <li>Raw AC-3 to AC-3 in MP4</li> <li>Raw EC-3 to EC-3 in MP4</li> <li>AAC in MPEG-2 TS to AAC in MP4</li> <li>AC-3 in MPEG-2 TS to AC-3 in MP4</li> <li>EC-3 in MPEG-2 TS to EC-3 in MP4</li> <li>MP3 in MPEG-2 TS to MP3 in MP4</li> <li>MP3 in MPEG-2 TS to raw MP3</li> <li>Opus in MPEG-2 TS to MP3 in MP4</li> <li>H.264 in MPEG-2 TS to H.264 in MP4</li> <li>H.265 in MPEG-2 TS to H.265 in MP4</li> <li>Muxed content in MPEG-2 TS with the previous codecs</li> </ul> <h2>Thumbnails support</h2> <p>Shaka Player supports:</p> <ul> <li>Internal DASH thumbnails. Using DASH-IF IOP Image Adaptation Set</li> <li>Internal HLS thumbnails. Using HLS Image Media Playlist</li> <li>Internal HLS thumbnails. Using I-frame-only playlists with mjpg codec</li> <li>External WebVTT with images/sprites (only for VoD)</li> </ul> <h2>Monetization with Ads</h2> <p>Shaka Player supports:</p> <ul> <li>IMA SDK for Client-Side Ad Insertion</li> <li>IMA DAI SDK for Server-Side Ad Insertion</li> <li>AWS MediaTailor for Client-Side</li> <li>AWS MediaTailor for Server-Side</li> <li>AWS MediaTailor overlays</li> <li>HLS interstitials</li> <li>Custom Interstitials</li> <li>Basic support of VAST and VMAP without IMA (playback without tracking)</li> </ul> <h2>Content Steering support</h2> <p>Shaka Player supports Content Steering (v1) in DASH and HLS.</p> <p>Content Steering features supported:</p> <ul> <li>TTL, if missing, the default value is 300 seconds.</li> <li>RELOAD-URI, if missing we use the url provided in the manifest as fallback.</li> <li>PATHWAY-PRIORITY only HOST replacement</li> </ul> <p>Content Steering features <strong>not</strong> supported:</p> <ul> <li>PATHWAY-CLONES other replacements than HOST.</li> </ul> <h2>VR support</h2> <p>Shaka Player supports VR when:</p> <ul> <li>Content is automatically treated as VR if it fits the following criteria: <ul> <li>HLS or DASH manifest</li> <li>fMP4 segments</li> <li>Init segment contains <code>prji</code> and <code>hfov</code> boxes</li> </ul></li> <li>Or, if it is manually enabled via the UI config.</li> </ul> <p>VR modes supported:</p> <ul> <li>Equirectangular projection with 360 degrees of horizontal field of view.</li> <li>Cubemap projection with 360 degrees of horizontal field of view.</li> </ul> <p>NOTES:</p> <ul> <li>VR is only supported for clear streams or HLS-AES stream. DRM prevents access to the video pixels for transformation.</li> </ul> <h2>Documentation & Important Links</h2> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://shaka-player-demo.appspot.com">Demo</a>(<a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/demo/">sources</a>)</li> <li><a rel="noreferrer nofollow" target="_blank" href="https://nightly-dot-shaka-player-demo.appspot.com">Nightly Demo</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://index-dot-shaka-player-demo.appspot.com">Demo index</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://shaka-player-demo.appspot.com/docs/api/index.html">API documentation</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html">Tutorials</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/speed/libraries/#shaka-player">Hosted builds on Google Hosted Libraries</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://www.jsdelivr.com/package/npm/shaka-player">Hosted builds on jsDelivr</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/roadmap.md">Development roadmap</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://groups.google.com/forum/#!forum/shaka-player-users">Announcement list</a> (<a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/docs/announcement-list-join-group.png">join</a> for infrequent announcements and surveys)</li> <li>Subscribe to releases by following <a rel="noreferrer nofollow" target="_blank" href="https://www.jessesquires.com/blog/2020/07/30/github-tip-watching-releases/">instructions from this blog</a></li> </ul> <h2>FAQ</h2> <p>For general help and before filing any bugs, please read the <a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/docs/tutorials/faq.md">FAQ</a>.</p> <h2>Contributing</h2> <p>If you have improvements or fixes, we would love to have your contributions. Please read <a rel="noreferrer nofollow" target="_blank" href="https://github.com/shaka-project/shaka-player/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a> for more information on the process we would like contributors to follow.</p> <h2>Framework Integrations</h2> <p>The Shaka team doesn't have the bandwidth and experience to provide guidance and support for integrating Shaka Player with specific frameworks, but some of our users have successfully done so and created tutorials to help other beginners.</p> <p>Shaka + ReactJS Library</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/winoffrg/limeplay">https://github.com/winoffrg/limeplay</a></li> </ul> <p>Shaka + ReactJS integrations:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/matvp91/shaka-player-react">https://github.com/matvp91/shaka-player-react</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/amit08255/shaka-player-react-with-ui-config">https://github.com/amit08255/shaka-player-react-with-ui-config</a></li> </ul> <p>Shaka + Next.js integration:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player">https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player</a></li> </ul> <p>Shaka + Vue.js integrations:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/davidjamesherzog/shaka-player-vuejs">https://github.com/davidjamesherzog/shaka-player-vuejs</a></li> </ul> <p>Shaka + Nuxt.js integration:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/davidjamesherzog/shaka-player-nuxtjs">https://github.com/davidjamesherzog/shaka-player-nuxtjs</a></li> </ul> <p>Shaka + video.js integration:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/davidjamesherzog/videojs-shaka">https://github.com/davidjamesherzog/videojs-shaka</a></li> </ul> <p>Shaka + Angular integration:</p> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/PatrickKalkman/shaka-player-angular">https://github.com/PatrickKalkman/shaka-player-angular</a></li> </ul> <p>If you have published Shaka Integration code/tutorials, please feel free to submit PRs to add them to this list, we will gladly approve!</p></div> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>