Google Cast

Add Google Cast to any Video.js streaming media element (HLS and DASH) by placing the Google Cast component next to it. Pair it with a CastButton and users can move playback to a Chromecast device while the browser stays in control:

import { CastButton, createPlayer } from '@videojs/react';
import { GoogleCast } from '@videojs/react/media/google-cast';
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

export default function App() {
  return (
    <Player.Provider>
      <Player.Container>
        <HlsJsVideo
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
          autoPlay
          muted
          playsInline
          loop
        />
        <GoogleCast />
        <CastButton />
      </Player.Container>
    </Player.Provider>
  );
}

<video-player>
  <media-container>
    <hlsjs-video
      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
      autoplay
      muted
      playsinline
      loop
    ></hlsjs-video>
    <google-cast></google-cast>
    <media-cast-button></media-cast-button>
  </media-container>
</video-player>

The component registers Google Cast with whichever media the player is using, so it works with any of the streaming media elements. The pre-built skins include a Cast button already. It appears when a Chromecast device is on the network and stays hidden otherwise.

How Cast works

Cast uses a sender / receiver model:

• Sender: the browser tab. It sends the receiver a load request with the source URL and metadata, then issues playback commands (play, pause, seek, volume).
• Receiver: the Chromecast device running a receiver application, either Google’s default media receiver or a custom one you configure.

Session lifecycle

A Cast session moves through three states, exposed by the Remote Playback feature:

While connected, the media element’s play, pause, currentTime, volume, muted, and playbackRate all forward to the Cast receiver. Local playback is suspended.

The lazy-loaded SDK

Video.js injects the Cast SDK (cast_sender.js) as a <script> tag the first time a Google Cast component is added in a Chromium browser. Browsers that can’t cast — and players without the component — never load the SDK.

Set disableRemotePlayback on the media element to opt out of remote playback entirely:

<HlsJsVideo disableRemotePlayback />

<hlsjs-video disableremoteplayback></hlsjs-video>

Configure Cast

By default, the receiver loads the same source the browser plays through Google’s Default Media Receiver. Point Cast at your own receiver app, send a different source, attach custom data to the load request, or override the stream type through the component’s options:

<HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
<GoogleCast
  receiver="YOUR_APP_ID"
  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
  contentType="application/x-mpegURL"
/>

<hlsjs-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"></hlsjs-video>
<google-cast
  receiver="YOUR_APP_ID"
  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
  content-type="application/x-mpegURL"
></google-cast>

The GoogleCast reference documents every option. HLS sources need no extra receiver setup: Video.js detects the segment format and configures the load request, and the Default Media Receiver plays HLS natively.

Read Cast state

Cast session state lives in the Remote Playback feature slice. Subscribe with selectRemotePlayback:

import { selectRemotePlayback, usePlayer } from '@videojs/react';

function CastStatus() {
  const remotePlayback = usePlayer(selectRemotePlayback);
  if (!remotePlayback) return null;

  return <span>{remotePlayback.remotePlaybackState}</span>;
}

import { PlayerController, playerContext, selectRemotePlayback } from '@videojs/html';

class CastStatus extends HTMLElement {
  readonly #remotePlayback = new PlayerController(this, playerContext, selectRemotePlayback);
}

Browser availability

The Remote Playback feature reports availability as 'available' (a device is on the network), 'unavailable' (no device found), or 'unsupported' (the browser can’t cast). A CastButton handles the presentation for you: it hides itself when Cast is unsupported, and shows a disabled state when Cast is supported but no device is reachable. See its reference for the data attributes and styling hooks.

See also