DASH

Plays .mpd streams through dash.js, downloaded only when a DASH source loads. Press play below, then open the settings menu to pick a quality.

"use client";import { dash } from "react-video-kit/dash";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";export default function Dash() {  return (    <VideoPlayer      src="/media/dash/manifest.mpd"      poster="/media/poster.jpg"      plugins={[dash(), ...defaultPlugins()]}      load="visible"    />  );}

Usage

dash.js is an optional peer dependency, so add it yourself. The package asks for ^5.0.0.

npm install dashjs

import { dash } from "react-video-kit/dash";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";const plugins = [dash(), ...defaultPlugins()];<VideoPlayer src="/stream.mpd" plugins={plugins} />;

dash() isn't part of defaultPlugins(), so list it alongside them.

To change how dash.js behaves, pass its settings as settings. They go to updateSettings before the stream starts:

dash({ settings: { streaming: { buffer: { bufferTimeAtTopQuality: 30 } } } });

How the provider gets chosen

dash() claims a source whose type is application/dash+xml. With no type, it claims a path ending in .mpd, ignoring any query string or hash. A URL with no extension needs a type:

<VideoPlayer src={{ src: "/streams/42", type: "application/dash+xml" }} plugins={plugins} />;

dash.js needs Media Source or Managed Media Source. Without either, the plugin steps aside and the browser gets the source if canPlayType says it can play it. If it can't, the player tries the next fallback source, so a list keeps those browsers playing:

const sources = [  { src: "/stream.mpd", type: "application/dash+xml" },  { src: "/video.mp4", type: "video/mp4" },];<VideoPlayer src={sources} plugins={plugins} />;

After the last source, the player reports a fatal source-no-provider error.

When dash.js loads

dash.js downloads when a source the plugin claims starts loading, so dash() adds little to a page of MP4s. The load prop decides when that is:

<VideoPlayer src="/stream.mpd" plugins={plugins} load="visible" />;

load is read once, when the player is created. If dash.js fails to download, the player reports a fatal dash-engine-load error instead of hanging.

Behaviour

• Choosing a quality turns off dash.js's automatic switching and replaces what's buffered, so the new quality shows right away. Choosing Auto turns switching back on.
• The player treats what dash.js emits as fatal, apart from unreadable captions and a failed time sync, which it carries on after. Each has one of the dash- codes, with dash.js's own number as nativeCode. Failed downloads are ones the recovery plugin retries.
• Audio tracks from the manifest go to the audio tracks menu, and quality levels to the quality menu.
• For a live manifest, the player reads dash.js's DVR window every 2 seconds and reports it to the live plugin.
• The DRM plugin hands dash.js its protection data before the stream starts.

Subtitles

Text tracks in the manifest appear under Captions when the captions plugin is installed, and the plugin draws them like any other track. They start off, because dash() turns off dash.js's defaultEnabled setting, and the menu uses each adaptation set's label. A set with no label shows its language, and one with neither shows its id. defaultPlugins() includes the captions plugin, so this demo needs nothing more. Press play, then open Captions in the settings menu.

"use client";import { dash } from "react-video-kit/dash";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";export default function DashCaptions() {  return (    <VideoPlayer      src="/media/dash/subtitled.mpd"      poster="/media/poster.jpg"      plugins={[dash(), ...defaultPlugins()]}    />  );}

API

Options

State

This plugin has no state of its own.

Commands

This plugin has no commands of its own.