Silvermine VideoJS Chromecast Plugin

You can integrate the plugin using two primary methods:

1. Using the NPM module (Recommended for modern workflows)

Install the package via npm:

npm install @silvermine/videojs-chromecast

Then, register it with Video.js using a module loader (like Webpack or Browserify):

var videojs = require('video.js');
require('@silvermine/videojs-chromecast')(videojs);

Note: The source uses ES6+. If you need ES5 compatibility, require the pre-transpiled file instead: require('@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.js').

2. Using pre-built assets (Direct <script> tags)

Include the plugin after Video.js, and ensure the Chromecast framework is included after the plugin:

<script src="https://unpkg.com/video.js@6.1.0/dist/video.js"></script>
<script src="./dist/silvermine-videojs-chromecast.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

var videojs = require('video.js');

// Initialize the Chromecast plugin
require('@silvermine/videojs-chromecast')(videojs);

If using SCSS, import the plugin's source file:

@import "path/to/node_modules/@silvermine/videojs-chromecast/src/scss/videojs-chromecast";

You can override the following variables:

• $icon-chromecast--default: Path to default state icon. (Default: "images/ic_cast_white_24dp.png")
• $icon-chromecast--hover: Path to hover state icon. (Default: "images/ic_cast_white_24dp.png")
• $icon-chromecast-casting: Path to icon when casting. (Default: "images/ic_cast_connected_white_24dp.png")
• $icon-chromecast-casting--hover: Path to icon when casting + hover. (Default: "images/ic_cast_connected_white_24dp.png")
• $chromecast-icon-size: Icon width/height. (Default: 12px)
• $chromecast-title-font-size: Title font size. (Default: 22px)
• $chromecast-subtitle-font-size: Subtitle font size. (Default: 18px)
• $chromecast-poster-width: Poster width. (Default: 100px)
• $chromecast-poster-max-height: Poster max height. (Default: 180px)

Important: If you override icon paths, ensure the images are accessible relative to the compiled CSS file. By default, the plugin expects images to be in an ./images/ folder relative to the CSS location.

These functions allow you to pass dynamic data to the Chromecast receiver during a session.

var options = {
   techOrder: [ 'chromecast', 'html5' ],
   chromecast: {
      requestTitleFn: function(source) {
         return 'My Video Title';
      },
      modifyLoadRequestFn: function (loadRequest) {
         loadRequest.media.hlsSegmentFormat = 'fmp4';
         return loadRequest;
      }
   },
   plugins: {
      chromecast: {}
   }
};

When initializing the chromecast Tech, you can provide several callback functions in the options object to customize how media metadata and load requests are handled. These functions allow you to inject custom logic for titles, subtitles, custom data, and request modification before the media is sent to the Chromecast device.

Available option keys:

• requestTitleFn: A function that receives the source object and returns a string for the media title.
• requestSubtitleFn: A function that receives the source object and returns a string for the media subtitle.
• requestCustomDataFn: A function that receives the source object and returns an object for chrome.cast.media.LoadRequest.customData.
• modifyLoadRequestFn: A function that receives the chrome.cast.media.LoadRequest object and must return a modified (or original) LoadRequest object.
• startTime: A number representing the initial playback position in seconds.
• source: The media source object.
• muted: A boolean indicating if the player should start muted.

// Example of providing custom logic via options
const options = {
  requestTitleFn: (source) => "My Custom Title",
  requestSubtitleFn: (source) => "My Custom Subtitle",
  requestCustomDataFn: (source) => ({ myKey: 'myValue' }),
  modifyLoadRequestFn: (request) => {
    // Modify the Google Cast LoadRequest object directly
    request.autoplay = true;
    return request;
  },
  startTime: 10,
  source: { src: 'http://example.com/video.mp4', type: 'video/mp4' }
};