Convert Figma logo to code with AI

shaka-project logoshaka-player

JavaScript player library / DASH & HLS client / MSE-EME player

7,054
1,327
7,054
92
View on GitHubView on NPM

Top Related Projects

video-dev's avatar

hls.js

14,783

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

videojs's avatar

video.js

37,959

Video.js - open source HTML5 video player

clappr's avatar

clappr

7,101

:clapper: An extensible media player for the web.

Dash-Industry-Forum's avatar

dash.js

5,087

A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers.

jwplayer's avatar

jwplayer

2,523

JW Player is the world's most popular embeddable media player.

flowplayer's avatar

flowplayer

1,923

The HTML5 video player for the web

Quick Overview

Shaka Player is an open-source JavaScript library for adaptive media streaming. It supports various streaming protocols, including DASH and HLS, and works across different browsers and platforms. Shaka Player is designed to make it easy for developers to add high-quality video playback to their web applications.

Pros

  • Supports multiple streaming protocols (DASH, HLS, MSS)
  • Cross-browser compatibility and responsive design
  • Extensive customization options and API
  • Active development and community support

Cons

  • Learning curve for advanced features
  • Some features may require additional setup or plugins
  • Performance can vary depending on the browser and device
  • Limited support for older browsers

Code Examples

  1. Basic video playback:
const video = document.getElementById('video');
const player = new shaka.Player(video);

player.load('https://example.com/video.mpd').then(() => {
  console.log('The video has been loaded');
});
  1. Adding custom UI controls:
const video = document.getElementById('video');
const player = new shaka.Player(video);
const ui = new shaka.ui.Overlay(player, container, video);

const config = {
  addBigPlayButton: true,
  addSeekBar: true
};
ui.configure(config);
  1. Handling errors:
player.addEventListener('error', (event) => {
  console.error('Error code', event.detail.code, 'object', event.detail);
});
  1. Setting up DRM:
player.configure({
  drm: {
    servers: {
      'com.widevine.alpha': 'https://example.com/widevine-license-server',
      'com.microsoft.playready': 'https://example.com/playready-license-server'
    }
  }
});

Getting Started

  1. Include Shaka Player in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.5/shaka-player.compiled.js"></script>
  1. Create a video element and initialize the player:
<video id="video" controls></video>
<script>
  const video = document.getElementById('video');
  const player = new shaka.Player(video);

  // Listen for errors
  player.addEventListener('error', (event) => {
    console.error('Error:', event.detail);
  });

  // Load a manifest
  player.load('https://example.com/video.mpd').then(() => {
    console.log('Video loaded successfully');
  }).catch((error) => {
    console.error('Error loading video:', error);
  });
</script>

This basic setup will give you a functional video player with adaptive streaming capabilities. You can further customize the player by exploring Shaka Player's extensive API and configuration options.

Competitor Comparisons

video-dev logo

hls.js

14,783

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

Pros of hls.js

  • Lightweight and focused specifically on HLS playback
  • Extensive browser support, including older versions
  • Simple integration with existing video players

Cons of hls.js

  • Limited to HLS streaming protocol
  • Fewer advanced features compared to Shaka Player
  • Less support for DRM and content protection

Code Comparison

hls.js:

var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://example.com/video.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
  video.play();
});

Shaka Player:

var video = document.getElementById('video');
var player = new shaka.Player(video);
player.load('https://example.com/video.mpd').then(function() {
  console.log('The video has now been loaded!');
});

Both libraries provide straightforward ways to load and play video content, but Shaka Player offers a more promise-based approach and supports multiple streaming protocols. hls.js focuses solely on HLS and provides event-based control flow.

Shaka Player offers a more comprehensive solution for adaptive streaming, supporting multiple protocols and advanced features like offline playback and DRM. However, this comes at the cost of a larger library size and potentially more complex setup.

hls.js, being more focused, can be easier to integrate for projects that only require HLS playback and prioritize lightweight solutions. It's particularly useful for projects targeting a wide range of browsers, including older ones.

videojs logo

video.js

37,959

Video.js - open source HTML5 video player

Pros of Video.js

  • Wider browser and device support, including older versions
  • More extensive plugin ecosystem and community contributions
  • Easier customization of player appearance and controls

Cons of Video.js

  • Less robust support for adaptive streaming formats like DASH
  • Higher overhead and larger file size
  • Requires more setup for advanced features

Code Comparison

Video.js basic setup:

videojs('my-video', {
  controls: true,
  sources: [{ src: 'video.mp4', type: 'video/mp4' }]
});

Shaka Player basic setup:

const video = document.getElementById('video');
const player = new shaka.Player(video);
player.load('https://example.com/video.mpd');

Video.js focuses on a more traditional HTML5 video approach with additional features, while Shaka Player is specifically designed for adaptive streaming technologies. Video.js offers greater flexibility for general video playback scenarios, whereas Shaka Player excels in handling complex streaming protocols and DRM.

The code comparison shows that Video.js has a more straightforward initial setup for basic video playback, while Shaka Player's setup is geared towards loading adaptive streaming manifests.

Both libraries have their strengths, and the choice between them depends on the specific requirements of your project, such as the types of video content you need to play and the target audience's device capabilities.

clappr logo

clappr

7,101

:clapper: An extensible media player for the web.

Pros of Clappr

  • Lightweight and modular architecture, making it easier to customize and extend
  • Built-in support for multiple streaming protocols (HLS, DASH, etc.) without additional plugins
  • Simpler setup process for basic use cases

Cons of Clappr

  • Less robust DRM support compared to Shaka Player
  • Fewer advanced features for adaptive streaming and low-latency playback
  • Smaller community and less frequent updates

Code Comparison

Clappr basic setup:

var player = new Clappr.Player({
  source: "https://example.com/video.mp4",
  parentId: "#player"
});

Shaka Player basic setup:

var video = document.getElementById('video');
var player = new shaka.Player(video);
player.load('https://example.com/video.mpd');

Both players offer straightforward initialization, but Shaka Player requires separate video element creation. Clappr's setup is slightly more concise for basic use cases, while Shaka Player's approach provides more flexibility for advanced configurations.

Clappr is ideal for projects requiring a lightweight, easy-to-use player with built-in support for multiple streaming protocols. Shaka Player is better suited for applications needing advanced DRM support, extensive customization options, and robust adaptive streaming capabilities.

Dash-Industry-Forum logo

dash.js

5,087

A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers.

Pros of dash.js

  • More focused on DASH-specific features and compliance
  • Extensive support for DASH-IF Interoperability Points
  • Larger community and industry backing

Cons of dash.js

  • Limited support for other streaming formats (e.g., HLS)
  • Less flexible API compared to Shaka Player
  • Steeper learning curve for beginners

Code Comparison

dash.js:

var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), "video.mpd", true);

Shaka Player:

var player = new shaka.Player(document.getElementById('video'));
player.load('video.mpd');

Both libraries offer straightforward initialization, but Shaka Player's API is slightly more concise. dash.js provides more DASH-specific options out of the box, while Shaka Player offers a more generalized approach to streaming.

dash.js excels in DASH compliance and industry support, making it ideal for projects requiring strict adherence to DASH standards. Shaka Player, on the other hand, provides broader format support and a more flexible API, which may be preferable for projects needing to handle multiple streaming formats or requiring more customization.

jwplayer logo

jwplayer

2,523

JW Player is the world's most popular embeddable media player.

Pros of JW Player

  • More comprehensive feature set, including advanced analytics and advertising support
  • Extensive documentation and support resources
  • Wider range of supported platforms and devices

Cons of JW Player

  • Proprietary software with licensing costs
  • Less flexibility for customization compared to open-source alternatives
  • Potentially heavier footprint due to additional features

Code Comparison

JW Player setup:

jwplayer("myElement").setup({
  file: "https://example.com/video.mp4",
  width: "100%",
  aspectratio: "16:9"
});

Shaka Player setup:

const video = document.getElementById('video');
const player = new shaka.Player(video);
player.load('https://example.com/manifest.mpd');

Both players offer straightforward setup processes, but JW Player's configuration is more declarative, while Shaka Player requires more programmatic setup. JW Player's setup includes built-in responsive design features, whereas Shaka Player leaves more control to the developer for UI customization.

JW Player provides a more comprehensive out-of-the-box solution, especially for commercial applications with advanced features like advertising and analytics. Shaka Player, being open-source, offers greater flexibility for developers who need fine-grained control over their video player implementation and are willing to invest time in customization.

flowplayer logo

flowplayer

1,923

The HTML5 video player for the web

Pros of Flowplayer

  • Simpler setup and configuration for basic video playback scenarios
  • Lightweight and focused on core video playback functionality
  • Better support for older browsers and legacy video formats

Cons of Flowplayer

  • Limited support for advanced streaming protocols like DASH
  • Less extensive feature set for complex video applications
  • Smaller community and fewer regular updates compared to Shaka Player

Code Comparison

Shaka Player initialization:

const video = document.getElementById('video');
const player = new shaka.Player(video);
player.load('https://example.com/video.mpd');

Flowplayer initialization:

flowplayer('#player', {
  clip: {
    sources: [
      { type: 'video/mp4', src: 'https://example.com/video.mp4' }
    ]
  }
});

Both players offer straightforward initialization, but Shaka Player's code demonstrates its focus on adaptive streaming (DASH) support, while Flowplayer's example shows its simplicity for basic video playback scenarios.

Shaka Player is more suitable for complex streaming applications with a need for extensive customization and support for advanced protocols. Flowplayer is a good choice for simpler video playback needs and projects requiring broad browser compatibility.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

BrowserWindowsMacLinuxAndroidiOS >= 9iOS >= 17.1iPadOS >= 13ChromeOSOther
Chrome¹YYYYNativeNativeNativeY-
Firefox¹YYYuntested⁵NativeNativeNative--
Edge¹Y--------
Edge ChromiumYYYuntested⁵NativeNativeNative--
IEN--------
Safari¹-Y--NativeYY--
Opera¹untested⁵untested⁵untested⁵untested⁵Native----
Chromecast².--------Y
Tizen TV³--------Y
WebOS⁶--------Y
Hisense⁷--------Y
Xbox One--------Y
Playstation 4⁷--------Y
Playstation 5⁷--------Y

NOTES:

  • ¹: On macOS, only Safari 9+ is supported. On iOS, only iOS 9+ is supported. Older versions will be rejected.
  • ²: The 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.
  • ⁵: These are expected to work, but are not actively tested by the Shaka Player team.
  • ⁶: These are expected to work, but are community-supported and untested by us.
  • ⁷: These are expected to work, but are community-supported and untested by us.

NOTES for iOS and iPadOS:

  • We support iOS 9+ through Apple's native HLS player. We provide the same top-level API, but we just set the video's src element to the manifest/media. So we are dependent on the browser supporting the manifests.
  • Since iPadOS 13 MediaSource Extensions is supported
  • Since iPadOS 17 and iOS 17.1 ManagedMediaSource Extensions is supported

Manifest format support matrix

FormatVideo On-DemandLiveEventIn-Progress Recording
DASHYY-Y
HLSYYY-
MSSY---

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
  • WebVTT and TTML
  • CEA-608/708 captions
  • Multi-codec variants (on platforms with changeType support)
  • MPD chaining
  • MPD Patch updates for SegmentTemplate with $Number$, SegmentTimeline with $Number$ and SegmentTimeline with $Time$

DASH features not supported:

HLS features

HLS features supported:

  • VOD, Live, and Event types
  • Low-latency streaming with partial segments, preload hints, delta updates and blocking playlist reload
  • Discontinuity
  • ISO-BMFF / MP4 / CMAF support
  • MPEG-2 TS support
  • WebVTT and TTML
  • CEA-608/708 captions
  • Encrypted content with PlayReady and Widevine
  • Encrypted content with FairPlay (Safari on macOS and iOS 9+ only)
  • AES-128, AES-256 and AES-256-CTR support on browsers with Web Crypto API support
  • SAMPLE-AES and SAMPLE-AES-CTR (identity) support on browsers with ClearKey support
  • Key rotation
  • Raw AAC, MP3, AC-3 and EC-3 (without an MP4 container)
  • I-frame-only playlists (for trick play and thumbnails)
  • #EXT-X-IMAGE-STREAM-INF for thumbnails
  • Interstitials
  • Container change during the playback (eg: MP4 to TS, or AAC to TS)

HLS features not supported:

  • X-SNAP attribute in interstitials

MPEG-5 Part2 LCEVC Support

Only supported on browsers with Media Source Extensions SourceBuffer support

MSS features

MSS features supported:

  • VOD
  • AAC and H.264
  • Encrypted content (PlayReady)
  • TTML/DFXP
  • Only supported with codem-isoboxer

MSS features not supported:

  • Live

DRM support matrix

BrowserWidevinePlayReadyFairPlayClearKey⁶
Chrome¹Y--Y
Firefox²Y--Y
Edge³-Y--
Edge ChromiumYY-Y
Safari--Y-
Operauntested⁵--untested⁵
ChromecastYY-Y
Tizen TVYY-Y
WebOS⁷untested⁷untested⁷-untested⁷
Hisense⁷untested⁷untested⁷-untested⁷
Xbox One-Y--
Playstation 4⁷-untested⁷-untested⁷
Playstation 5⁷-untested⁷-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.
  • ⁵: 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.
  • ⁷: These are expected to work, but are community-supported and untested by us.
ManifestWidevinePlayReadyFairPlayClearKey
DASHYY-Y
HLSYYY ¹-
MSS-Y--

NOTES:

  • ¹: By default, FairPlay is handled using Apple's native HLS player, when on Safari. We do support FairPlay through MSE/EME, however. See the streaming.useNativeHlsForFairPlay configuration value.

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
    • For MSS, codem-isoboxer v0.3.7+ is required
  • 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
    • 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
  • CEA-608
    • Supported embedded in MP4 and TS
  • CEA-708
    • Supported embedded in MP4 and TS
  • Raw AAC
    • Supported in raw AAC container and transmuxing to AAC in MP4 container (depends on browser support via MediaSource).
  • Raw MP3
    • Supported in raw MP3 container and transmuxing to MP3 in MP4 container (depends on browser support via MediaSource).
  • Raw AC-3
    • Supported in raw AC-3 container and transmuxing to AC-3 in MP4 container (depends on browser support via MediaSource).
  • Raw EC-3
    • Supported in raw EC-3 container and transmuxing to EC-3 in MP4 container (depends on browser support via MediaSource).
  • SubRip (SRT)
    • UTF-8 encoding only
  • LyRiCs (LRC)
    • UTF-8 encoding only
  • SubStation Alpha (SSA, ASS)
    • UTF-8 encoding only
  • SubViewer (SBV)
    • UTF-8 encoding only

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

Transmuxer support

Shaka Player supports:

  • Raw AAC to AAC in MP4
  • Raw MP3 to MP3 in MP4
  • Raw AC-3 to AC-3 in MP4
  • Raw EC-3 to EC-3 in MP4
  • AAC in MPEG-2 TS to AAC in MP4
  • AC-3 in MPEG-2 TS to AC-3 in MP4
  • EC-3 in MPEG-2 TS to EC-3 in MP4
  • MP3 in MPEG-2 TS to MP3 in MP4
  • MP3 in MPEG-2 TS to raw MP3
  • Opus in MPEG-2 TS to MP3 in MP4
  • H.264 in MPEG-2 TS to H.264 in MP4
  • H.265 in MPEG-2 TS to H.265 in MP4
  • Muxed content in MPEG-2 TS with the previous codecs

Thumbnails support

Shaka Player supports:

  • Internal DASH thumbnails. Using DASH-IF IOP Image Adaptation Set
  • Internal HLS thumbnails. Using HLS Image Media Playlist
  • Internal HLS thumbnails. Using I-frame-only playlists with mjpg codec
  • External WebVTT with images/sprites (only for VoD)

Monetization with Ads

Shaka Player supports:

  • IMA SDK for Client-Side Ad Insertion
  • IMA DAI SDK for Server-Side Ad Insertion
  • AWS MediaTailor for Client-Side
  • AWS MediaTailor for Server-Side
  • AWS MediaTailor overlays
  • HLS interstitials
  • Custom Interstitials
  • Basic support of VAST and VMAP without IMA (playback without tracking)

Content Steering support

Shaka Player supports Content Steering (v1) in DASH and HLS.

Content Steering features supported:

  • TTL, if missing, the default value is 300 seconds.
  • RELOAD-URI, if missing we use the url provided in the manifest as fallback.
  • PATHWAY-PRIORITY only HOST replacement

Content Steering features not supported:

  • PATHWAY-CLONES other replacements than HOST.

VR support

Shaka Player supports VR when:

  • Content is automatically treated as VR if it fits the following criteria:
    • HLS or DASH manifest
    • fMP4 segments
    • Init segment contains prji and hfov boxes
  • Or, if it is manually enabled via the UI config.

VR modes supported:

  • Equirectangular projection with 360 degrees of horizontal field of view.
  • Cubemap projection with 360 degrees of horizontal field of view.

NOTES:

  • VR is only supported for clear streams or HLS-AES stream. DRM prevents access to the video pixels for transformation.

Documentation & Important Links

FAQ

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

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.

Framework Integrations

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.

Shaka + ReactJS Library

Shaka + ReactJS integrations:

Shaka + Next.js integration:

Shaka + Vue.js integrations:

Shaka + Nuxt.js integration:

Shaka + video.js integration:

Shaka + Angular integration:

If you have published Shaka Integration code/tutorials, please feel free to submit PRs to add them to this list, we will gladly approve!

NPM DownloadsLast 30 Days