Videojs Chromecast Plugin

PREMIUM

GOLD

Chromecast Plugin v 4.5

Chromecast is a device developed by Google that simply plugs into a TV for the playback of content from a smartphone, tablet, PC, or laptop. Since 2013, Google sold more than 30 million Chromecast devices.
The Chromecast Plugin by Nuevodevel works fine with browsers that support Chromecast (desktop Chrome, Edge, Opera, and Chrome on Android). The plugin automatically detects Chromecast support and displays the Cast Button in the control bar. If you have a Chromecast device connected to your TV, you can test the demo video above.
You will need to load Google's cast sender script and the Chromecast plugin in addition to standard Video.js and Nuevo plugins. See the example setup below.

Code snippet

// Load skin css file and necessary scripts:
<link href="//www.domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet">
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js">
<script src="//domain.com/videojs/plugins/videojs-chromecast.min.js"></script>

// Setup your video
<video id="player_one" class="video-js" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video.mp4" type="video/mp4" />
<source src="//www.domain.com/path/to/video.webm" type="video/webm" />
</video>

// Initialize player and plugins
<script>
var options = {option1:'option', option2:'option2'}; // Nuevo plugin options
var player = videojs('player_one');
player.nuevo (options);
player.chromecast();
</script>

You may also need to set up a custom tech order through videojs options.

Code snippet

var player = videojs('player_one',{techOrder:['chromecast','html5']});

There are a few options that you can use when initializing the Chromecast plugin:

overlayButton - set true to display an additional Chromecast button in the top-left corner of the player.
ui - set fixed to display the minimized player fixed to the bottom of the browser while casting.
metaTitlte - an option used to display custom video title on the TV set.
metaSubtitle - an option used to display custom video subtitle on the TV set.
metaThumbnail - an option used to display thumbnail on the TV set.

More options are related to styling possible captions. Available styling options are:

Code snippet

trackColor (text color and opacity)
trackBackground (background color and opacity)
trackEdgeType (NONE, OUTLINE, DROP_SHADOW, RAISED, DEPRESSED)
trackEdgeColor
trackScale (text Scale)
trackFont (font family) - (SANS_SERIF, MONOSPACED_SANS_SERIF, SERIF, MONOSPACED_SERIF, CURSIVE, SMALL_CAPITALS)
trackStyle (font style) - (NORMAL, BOLD, BOLD_ITALIC, ITALIC)

Below is an example of the Chromecast plugin code setup with text track styling options.

Code snippet

player.chromecast({ trackColor:"#FFCC00FF", trackBackground:"#000000FF", tracksEdgeType:"NONE", trackScale:0.8, trackFont:"SERIF", trackStyle:"ITALIC" });

Title, subtitle, thumbnail

Options metaTitle, metaDescription, and metaThumbnail allow to display title, description, and thumbnail on TV. If options are not defined, the plugin will examine the Nuevo plugin's options title, description, and player's poster. The default size of the thumbnail image is 96x143 pixels. The image is scaled to fit the expected dimensions, keeping the aspect ratio.

Code snippet

player.chromecast({
metaTitle: 'Video title',
metaSubtitle: 'Video subtitle',
metaThumbnail: 'thumbnail URL'
});

Casting Fixed Player

An option ui:"fixed" allows to minimize the player while casting and show it fixed at the bottom of the browser window.

Code snippet

player.chromecast({ui:'fixed'});

Chromecast Ads

According to Google's API for Chromecast, the plugin allows you to play multiple video ads. Each ad can be either a VAST tag URL or a video from the URL. You must prepare an array of ads and assign the array variable as an adBreaks option. Below, you can see examples of single ad objects. You can merge multiple ads into an array and assign it to the adBreaks option. The ads are played in order based on timestamps (position parameter). An example available to try option allows you to test casting video with four ads (2 x Vast, 2 x video).

Code snippet

player.chromecast({adBreaks: adsArray});

A single VAST ad is defined as below:

Code snippet

{
id: 'bc0',
position: 30,
vastAdsRequest:{
adTagUrl: 'https://castsample.com/vast?rand=' + Math.floor(Math.random()* 10000)
}
}

A single video ad object is defined as below:

Code snippet

{
id: 'bc1',
position:240,
whenSkippable: 5,   //optional
contentUrl: 'https://domain.com/mediat/path-to-playlist.m3u8',
contentType: 'application/x-mpegURL',
clickThroughUrl: 'https://domain.com/clicktroughtracking',  //optional
title: 'Video ad title' //optional
}

The plugin fires two events, when Chromecast is connected and when it is disconnected. This is how to catch them:

Code snippet

player.on('chromecastConnected', function() {
console.log('connected');
});player.on('chromecastDisconnected', function() {
console.log('disconnected');
});

Google does not support non-secure origins (HTTP) with Chromecast. For video formats supported by Chromecast refer to - https://developers.google.com/cast/docs/media. Remember to use full absolute URL for each media source, and possible subtitle tracks, not relative paths.
The Chromecast plugin supports audio playback, including the display of the album's cover and on-screen information about the audio (artist, album, year), if it was only defined by the user.