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 on an integrator’s behalf. The AirPlay button, over Safari’s own API, ships with the player. A page that wants Cast installs the package and places its two elements, the way it places <mbx-diagnostics>.

<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 a Chromecast session and <mbx-cast-screen> drives the receiver while it runs. The button loads the SDK from gstatic the first time it connects, unless the page already has it or the button says sdk="none", in which case the page loads it. receiver is the receiver application id, the Default Media Receiver without one; the first button on the page decides it, 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

On start the player pauses the video, freezes the engine so nothing is fetched for a paused picture, and sends the session’s source at the video’s time, with the video’s own subtitle tracks and LIVE for a live stream. The player carries casting, the default stylesheet hides the bar and the start button, and the screen shows the receiver’s controls. On end the engine resumes, the video seeks to where the receiver stopped, and plays if the receiver was playing. A live stream rejoins at the edge instead.

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

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