### 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 `