Casting

Chromecast is @mattebox/player-cast, a package of its own. Its button loads Google’s sender SDK onto the page, and the player never loads third-party code for a page. The AirPlay button uses Safari’s own API, so it is part of the player.

Install the package and place its two elements, the way <mbx-diagnostics> is placed.

<mattebox-player src="…" controls="custom">
  <mbx-cast-screen></mbx-cast-screen>
  <mbx-control-bar>
    …
    <mbx-cast-button></mbx-cast-button>
  </mbx-control-bar>
</mattebox-player>

<script type="module">
  import '@mattebox/player';
  import '@mattebox/player-cast';
</script>

<mbx-cast-button> starts and ends a Chromecast session. <mbx-cast-screen> controls the receiver during the session.

The button loads the SDK from gstatic the first time it connects. It does not load the SDK when the page already has it, or when the button has sdk="none". In that case the page loads the SDK.

receiver is the id of the receiver application. Without it, the button uses the Default Media Receiver. The first button on the page decides the receiver, because the SDK keeps one context per page.

Element	Attributes	Labels	Icon slots
mbx-cast-button	receiver, sdk	label-start, label-stop	icon, icon-active
mbx-cast-screen		label with {device}, label-stop, label-play, label-pause, label-seek	icon-play, icon-pause

When a session starts, the player does this:

• It pauses the video.
• It suspends the engine, so the engine requests nothing during the cast.
• It sends the source of the session at the video’s current time, with the subtitle tracks of the video, and LIVE for a live stream.
• It sets casting on itself. The default stylesheet then hides the bar and the start button, and the cast screen shows the receiver’s controls.

When the session ends, the engine resumes. The video seeks to the time where the receiver stopped, and plays if the receiver was playing. A live stream returns to the live edge instead.

The receiver plays the URL by itself, so DRM and signed URLs are the page’s to arrange, in castload. The Default Media Receiver plays clear HLS and DASH. A protected stream needs a receiver of the page’s own, which reads what the page put in customData.

button.addEventListener('castload', (event) => {
  event.detail.customData = { licenseUrl: 'https://drm.example/widevine' };
});