ShakaVideo

Video element powered by Shaka Player. One element plays DASH, HLS, and progressive files, and it’s the media component to reach for when you need DRM.

Load a source

src takes a manifest URL. DASH, HLS, and progressive files all go through the same property, and Shaka picks the parser from the URL.

<ShakaVideo src="https://example.com/manifest.mpd" />

<shaka-video src="https://example.com/manifest.mpd"></shaka-video>

When the URL carries no extension to go on, name the type with source.type. That’s what makes an extensionless manifest playable.

<ShakaVideo source={{ src: 'https://example.com/manifest', type: 'application/dash+xml' }} />

const video = document.querySelector('shaka-video');
video.source = { src: 'https://example.com/manifest', type: 'application/dash+xml' };

Protected content

source.drm names your license servers, keyed by EME key system id. Name every system you hold a license server for: which one gets negotiated is the browser’s choice.

<ShakaVideo
  source={{
    src: 'https://example.com/manifest.mpd',
    drm: {
      'com.widevine.alpha': { licenseUrl: 'https://example.com/widevine' },
      'com.apple.fps': {
        licenseUrl: 'https://example.com/fairplay',
        serverCertificateUrl: 'https://example.com/fairplay.cer',
      },
    },
  }}
/>

const video = document.querySelector('shaka-video');
video.source = {
  src: 'https://example.com/manifest.mpd',
  drm: {
    'com.widevine.alpha': { licenseUrl: 'https://example.com/widevine' },
    'com.apple.fps': {
      licenseUrl: 'https://example.com/fairplay',
      serverCertificateUrl: 'https://example.com/fairplay.cer',
    },
  },
};

FairPlay needs a serverCertificateUrl unless its CDM is pre-provisioned; Widevine and PlayReady ignore it. source.drm takes the same shape as hls.js’s own drmSystems, so one object describes DRM for either engine.

For the parts of Shaka’s DRM configuration this doesn’t cover, configure Shaka directly. A drm.servers under source.engine.shaka replaces source.drm rather than merging with it.

Behavior

• Adaptation stays within renditions no larger than the element rendering them, through Shaka’s abr.restrictToElementSize. Override it under source.engine.shaka.
• preload="none" defers the load until playback is asked for; autoplay or a play() counts as asking.
• preload="metadata" loads, then holds Shaka’s buffering goals down to a second until preload rises to auto.
• streamType is detected from the manifest, so a player skin renders live and on-demand content correctly without being told which it is.
• Changing source.engine.shaka reconfigures the running player in place instead of recreating it.

Examples

Basic Usage

import { ShakaVideo } from '@videojs/react/media/shaka-video';

export default function BasicUsage() {
  return <ShakaVideo className="shaka-video" src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd" autoPlay muted playsInline loop />;
}

.shaka-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<media-container class="media-container">
    <shaka-video
        src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
        autoplay
        muted
        playsinline
        loop
    ></shaka-video>
</media-container>

.media-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/media/container';
import '@videojs/html/media/shaka-video';

<ShakaVideo
  source={{
    src: 'https://example.com/manifest.mpd',
    engine: { shaka: { streaming: { bufferingGoal: 30 } } },
  }}
/>

const video = document.querySelector('shaka-video');
video.source = {
  src: 'https://example.com/manifest.mpd',
  engine: { shaka: { streaming: { bufferingGoal: 30 } } },
};