Beta: Chromecast Plugin for Brightcove Player

Product(s)
Brightcove Player
Role(s)
Player Developer
Topic(s)
Playback
Plugins
Type
Support Doc

In this topic, you will learn how to use the Chromecast Plugin for Brightcove Player. Note that the plugin is in beta.

Overview

Google Chromecast is a device that you plug into your TV's HDMI port. Using your smartphone or computer as a remote control, you can use Chromecast to access video content. Chromecast Plugin for Brightcove Player enables Brightcove Player to cast video from your desktop or Android Chrome browser to the Chromecast device. The plugin supports all Video Cloud videos or external streams using HLS or DASH, including DRM-encrypted streams using Widevine. Advertising is supported through Video Cloud server-side ad insertion (SSAI). Client-side ads and playlists are not supported.

To actually use the plugin follow these steps:

  1. Load the Chromecast Plugin for Brightcove Player (detailed below).
  2. Be sure the Chromecast device is on the same network as your device that will play the video.
  3. Start playing the video.
  4. Click the cast button and select your Chromecast device.

Chromecast app components

The software behind Chromecast is comprised of the following components:

  • Sender application: As the name implies, this is the component that sends data to the Chromecast device. The sender application can be thought of as the "client side" portion of the Chromecast ecosystem.

    The Chromecast Plugin for Brightcove Player enables the sender app in Brightcove Player. You will learn about it in this topic.

  • Receiver application: This component handles communication between the sender app and the receiver device and runs on the Chromecast device. It can be thought of as a single page HTML app with CSS and JavaScript assets.

    As a Brightcove Player customer, you do not need to work with the code and configuration of the receiver application. By default, this plugin uses the Brightcove receiver app.

Using the plugin

The Chromecast Plugin for Brightcove Player is used like all other Brightcove Player plugins, that is you must load the plugin into the player.

Using Studio

The following steps detail using Studio to load the plugin.

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Plugins in the left navigation menu.
  4. Next, click Add a Plugin.
  5. For the Plugin Name enter chromecastReceiver.
  6. Include the plugin URLs.

    For the JavaScript URL, enter:

    https://players.brightcove.net/videojs-chromecast-receiver/1/videojs-chromecast-receiver.min.js

    For the CSS URL, enter:

    https://players.brightcove.net/videojs-chromecast-receiver/1/videojs-chromecast-receiver.css
  7. Enter the configuration options in the Options(JSON) text box. An example for the default player in the 1507807800001 account is shown. You, of course, need to enter information for your player.
    {
      "playerUrl" = "https://players.brightcove.net/1507807800001/default_default/index.min.js"
    }

    See below for details on the options.

  8. Click Save.
  9. To publish the player, click Publish & Embed > Publish Changes.
  10. To close the open dialog, click Close.

Code implementation

In code, the implementation would look like:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="https://players.brightcove.net/videojs-chromecast-receiver/1/videojs-chromecast-receiver.css" rel="stylesheet">
</head>
<body>
  <video-js id="myPlayerID"
  data-video-id="5622718636001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
  <script src="https://players.brightcove.net/videojs-chromecast-receiver/1/videojs-chromecast-receiver.min.js"></script>
  <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.chromecastReceiver();
  });
  </script>
</body>
</html>

Once the plugin is loaded and the video has started playing, the cast button will appear in the player as shown here in this screenshot of a player:

Cast button

Configuration options

No matter which method you choose to setup the Chromecast Plugin for Brightcove Player, you can pass options to modify plugin behavior. While setting these options is not necessary, additional customization is possible for advanced users. The available options are:

  • playerUrl
    Default: URL of current player

    When unspecified, this will point to the player that is casting your videos. Supplying this option will force the receiver to load a specific player rather than the player that is currently casting the video. This is useful when you want specific player code to only run on the Chromecast.

  • js
    Default: []

    An array of custom JavaScript to load after the player JavaScript has loaded on the Chromecast receiver.

  • css
    Default: []

    An array of custom CSS to load after the player CSS is loaded on the Chromecast receiver.

To pass options in code, you would use something similar to the following:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  options = {};
  options.playerUrl = '//players.brightcove.net/1507807800001/default_default/index.min.js';
  myPlayer.chromecastReceiver(options);
});

Changelog

31 Oct 2018

v1.1.1

  • Fixed a syntax error on the receiver, causing it to fail to load

12 Oct 2018

v1.1.0

  • Features
    • Add a splashScreen to show an image when a player is not loaded
    • UI improvements
    • Use a default player if one is not given
  • Bug Fixes
    • accountId not being passed correctly to receiver
    • Pass withCredentials into player.src on the receiver
    • Prevent registering receiver player twice, on new videos
    • Report sender data for analytics
    • Seeking issues caused by errors being thrown
    • Switching to another catalog video
  • Chores
    • Update using plugin generator v7.2.4

26 Jun 2018

v1.0.3

  • Bug fix: Pass withCredentials during load and source change and use it on the receiver

27 Feb 2018

v1.0.2

  • HTML special characters in Chromecast name
  • Re-request catalog data so DRM can work

23 Feb 2018

v1.0.1

  • Use JavaScript and CSS plugin options

22 Dec 2017

v1.0.0

  • Initial release