### Chromecast Plugin Configuration Example
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Example JavaScript configuration object demonstrating how to set up the videojs-chromecast plugin with custom title, subtitle, custom data, and load request modification functions.
```javascript
var titles, subtitles, customData, options;
titles = {
'https://example.com/videos/video-1.mp4': 'Example Title',
'https://example.com/videos/video-2.mp4': 'Example Title2',
};
subtitles = {
'https://example.com/videos/video-1.mp4': 'Subtitle',
'https://example.com/videos/video-2.mp4': 'Subtitle2',
};
customData = {
'https://example.com/videos/video-1.mp4': { 'customColor': '#0099ee' },
'https://example.com/videos/video-2.mp4': { 'customColor': '#000080' },
};
options = {
// Must specify the 'chromecast' Tech first
techOrder: [ 'chromecast', 'html5' ], // Required
// Configuration for the Chromecast Tech
chromecast: {
requestTitleFn: function(source) { // Not required
return titles[source.url];
},
requestSubtitleFn: function(source) { // Not required
return subtitles[source.url];
},
requestCustomDataFn: function(source) { // Not required
return customData[source.url];
},
modifyLoadRequestFn: function (loadRequest) { // HLS support
loadRequest.media.hlsSegmentFormat = 'fmp4';
loadRequest.media.hlsVideoSegmentFormat = 'fmp4';
return loadRequest;
}
},
plugins: {
chromecast: {
receiverAppID: '1234' // Not required
addButtonToControlBar: false, // Defaults to true
},
}
};
```
--------------------------------
### Initialize Chromecast Plugin with NPM
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Demonstrates how to install and require the videojs-chromecast NPM module and register it with Video.js using a module loader like Webpack or Browserify.
```javascript
var videojs = require('video.js');
// Initialize the Chromecast plugin
require('@silvermine/videojs-chromecast')(videojs);
```
--------------------------------
### Initialize with require() Options
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Demonstrates how to pass initialization options to the videojs-chromecast plugin when requiring it via NPM.
```javascript
require('@silvermine/videojs-chromecast')(videojs, { preloadWebComponents: true });
```
--------------------------------
### Initialize with Script Tag Options
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Shows how to set initialization options using a global configuration object (`SILVERMINE_VIDEOJS_CHROMECAST_CONFIG`) before loading the plugin via a script tag.
```html
```
--------------------------------
### Manual Plugin Initialization
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Illustrates how to manually initialize the videojs-chromecast plugin on an existing Video.js player instance.
```javascript
var player = videojs(document.getElementById('myVideoElement'));
player.chromecast(); // initializes the Chromecast plugin
```
--------------------------------
### Initialize Video.js with Chromecast
Source: https://github.com/silvermine/videojs-chromecast/blob/master/docs/demo/index.html
This snippet demonstrates how to initialize Video.js with the Chromecast technology. It configures player options, including enabling fluid mode and setting the technology order, before invoking the Chromecast plugin on the player instance.
```javascript
var options;
options = {
fluid: true,
techOrder: [ 'chromecast', 'html5' ],
};
videojs('video_1', options, function() {
var player = this;
player.chromecast();
});
```
--------------------------------
### Configure preloadWebComponents Option
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Explains the `preloadWebComponents` initialization option for the videojs-chromecast plugin. Setting this to `true` helps resolve race conditions with jQuery and the webcomponents.js polyfill, especially when using jQuery. Note that this option may affect the functionality of the `` custom component if used elsewhere.
```javascript
videojs('my-video', {
// ... other options
chromecast: {
preloadWebComponents: true
}
});
```
--------------------------------
### Include VideoJS, Chromecast Plugin, and Sender Script
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Demonstrates the correct order for including the Video.js library, the Silvermine Chromecast plugin's JavaScript file, and the Google Cast sender framework script in an HTML page. This ensures all dependencies are loaded before initialization.
```html
```
--------------------------------
### Plugin Configuration Options
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Details the available configuration options for the videojs-chromecast plugin, covering custom receiver app IDs, control bar integration, and button positioning.
```apidoc
Plugin Configuration Options:
plugins.chromecast.receiverAppID
- Type: string
- Description: The string ID of a custom Chromecast receiver app to use. Defaults to the default Media Receiver ID.
plugins.chromecast.addButtonToControlBar
- Type: boolean
- Description: A flag that tells the plugin whether or not it should automatically add the Chromecast button to the Video.js player's control bar component. Defaults to true.
plugins.chromecast.buttonPositionIndex
- Type: number
- Description: A zero-based number specifying the index of the Chromecast button among the control bar's child components (if addButtonToControlBar is set to true). By default the Chromecast Button is added as the last child of the control bar. A value less than 0 puts the button at the specified position from the end of the control bar. Note that it's likely not all child components of the control bar are visible.
plugins.chromecast.addCastLabelToButton
- Type: boolean
- Default: false
- Description: By default, the Chromecast button component will display only an icon. Setting addCastLabelToButton to true will display a label titled "Cast" alongside the default icon.
```
--------------------------------
### Chromecast Plugin Configuration Options
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Defines the configuration options available for the videojs-chromecast plugin's tech configuration. These options allow customization of the Chromecast UI and media loading behavior.
```APIDOC
chromecast.requestTitleFn:
- Type: Function
- Description: A function called by the plugin to get a string for the title shown in the Chromecast UI. Receives the current `source` object and should return a string. If not defined or returns nothing, no title is shown.
- Parameters:
- source: The current media source object.
- Returns: A string representing the title.
chromecast.requestSubtitleFn:
- Type: Function
- Description: A function called by the plugin to get a string for the subtitle shown in the Chromecast UI. Receives the current `source` object and should return a string. If not defined or returns nothing, no subtitle is shown.
- Parameters:
- source: The current media source object.
- Returns: A string representing the subtitle.
chromecast.requestCustomDataFn:
- Type: Function
- Description: A function called by the plugin to get an object containing custom information for a Chromecast receiver app. Receives the current `source` object and should return an object. If not defined or returns nothing, no custom data is sent. Useful for custom receiver applications.
- Parameters:
- source: The current media source object.
- Returns: An object containing custom data.
chromecast.modifyLoadRequestFn:
- Type: Function
- Description: A function called before loading media. It receives the `LoadRequest` object and should return it, potentially modified. Used for advanced features like setting HLS segment formats.
- Parameters:
- loadRequest: The `LoadRequest` object.
- Returns: The modified `LoadRequest` object.
plugins.chromecast.receiverAppID:
- Type: String
- Description: The application ID for the Chromecast receiver. (Optional)
plugins.chromecast.addButtonToControlBar:
- Type: Boolean
- Description: Controls whether the Chromecast button is added to the control bar. Defaults to `true`.
```
--------------------------------
### Import Chromecast Plugin SCSS
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Shows how to import the main SCSS file for the videojs-chromecast plugin into a project's SCSS files.
```scss
@import "path/to/node_modules/@silvermine/videojs-chromecast/src/scss/videojs-chromecast";
```
--------------------------------
### Minimum Player Configuration
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Provides the essential Video.js player configuration required for the Chromecast plugin to function, including setting the `techOrder` and registering the plugin.
```javascript
var options;
options = {
controls: true,
techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
plugins: {
chromecast: {}
}
};
videojs(document.getElementById('myVideoElement'), options);
```
--------------------------------
### Use ES5 Compatible Chromecast Plugin
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Provides an alternative method to require the plugin using a pre-transpiled ES5 compatible JavaScript file for older browser support.
```javascript
require('@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.js');
```
--------------------------------
### Chromecast Button Localization
Source: https://github.com/silvermine/videojs-chromecast/blob/master/README.md
Details on localizing the strings used by the `ChromecastButton` component in videojs-chromecast. This involves adding specific keys to the Video.js language maps.
```APIDOC
ChromecastButton Localization Strings:
1. "Open Chromecast menu"
- Usage: Appears in the `.vjs-control-text` span for accessibility and as the `