Requirements:

  • Chromecast Id

  • Third party library cast_sender.js

If you’d like to take advantage of hplayer (Shaka’s) built-in Chromecast support, you will need to provide us with your cast receiver application id.

Example

Add cast_sender.js library to your html page. (end of <body>)

<!-- Chromecast SDK (if you want Chromecast support for your app): -->
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

castReceiverAppId

  • Use the default receiver app id: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID = "CC1AD845" (value retrieved from cast_sender.js)

  • Or use your own receiver app id created from google chromecast sdk (https://cast.google.com/publish/#/overview)

// Options example:
const options = {
  basic: {
    source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  },
  ui_configuration: {
    // Chromecast default receiver app id from cast_sender.js
    // chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID === "CC1AD845"
    castReceiverAppId: 'CC1AD845',
  }
};

Listen to cast status change

If you want to track cast status changes, you should also set up a listener for the 'caststatuschanged' events.

  hplayer.controls_.addEventListener('caststatuschanged', onCastStatusChanged);

  function onCastStatusChanged(event) {
    const newCastStatus = event['newStatus'];
    // Handle cast status change
    console.log('The new cast status is: ' + newCastStatus);
  }