Chromecast Pro Plugin

Pro Plugin is the advanced version of the default Chromecast plugin for more demanding users. It is included free in the Gold plan of Nuevo software. The main advantage of the PRO plugin is that it is possible to cast a playlist of videos without disconnecting Chromecast device. Another significant advantage is that it is possible to stream video ads through VAST procol or by playing simple video ad from Url with ad skip option. A new option is to display a thumbnail on TV alongside the video title and subtitle, either taken automatically from the video poster or defined as a custom thumb image. Chromecast Pro plugin features also an experimental minimized player display, fixed to the bottom of the browser while casting to TV.

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

overlayButton - additional Chromecast button to display in the top corner of the player. Enabled by default.
ui - set "fixed" to display minimized player fixed to the bottom of the browser while casting.
metaTitlte - used to display video title showing on the TV set.
metaSubtitle - used to display video subtitle showing on the TV set.
metaThumbnail - used to display video thumbnail on the TV set.

More options are related to styling possible captions/subtitle text. Available styling options are: trackColor, trackBackground, trackEdgeType, trackEdgeColor, trackScale, trackFont and trackStyle. Captions/subtitles support and options are described in another demo example.
The basic setup of the player with the Chromecast plugin is exactly same as for standard plugin, described in this demo example.

Chromecast Overlay Button

When using Pro plugin, the Chromecast button is default button to appear in the control bar, left from fullscreen button. By default secondary button appears in the top-left corener of the player. If you prefer only control bar button, you can disable the one in the top-left corner.

Code snippet

player.chromecast({overlayButton:false});

Title, subtitle, thumbnail

To display title, subtitle and thumbnail on TV you can define appropriate values through chromecast plugin options.

Code snippet

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

The default size of the thumbnail image is 96x143 pixels. The image is scaled to fit the expected dimensions. If metaThumbnail option not defined, the Chromecast plugin will attempt to create a thumbnail from video poster automatically.
metaTitle, metaSubtitle and metaThumbnail can be also defined as video attributes. This is especially useful when you want to change the video source while casting or have a playlist of videos.

Casting Fixed Player

New option allows to minimize the player while casting and show it fixed at the bottom of the browser window.

Code snippet

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

The ui option is marked as experimental one. It may happen that the user nest video element inside container with pre-defined height value. When the player goes fixed to the bottom, such parent element will become empty, but the same pre-defined height. To avoid empty space when player goes fixed, you can listen to chromecast conneted/disconnected events and change the height of the parent element accordingly. This is how we have implemented the player on this example page. Video parent element width class "vjs-media" has padding-top style with value = "56.25%". This makes the parent element of 16:9 aspect ration. When chromecast connected we set the parent's padding-top inline style = 0. When disconnected, we remove the inline style.

Code snippet

player.on('chromecastConnected', function() {
document.querySelector('.vjs-media').style.padding=0;
})
player.on('chromecastDisonnected', function() {
document.querySelector('.vjs-media').removeAttribute('style');
})

Chromecast Ads

The Chromecast Pro plugin allows to play multiple video ads. Each ad can be either VAST tag URL or video ad from the Url. You must prepare an array of ads and assign the array variable as an adBreaks option.

Code snippet

player.chromecast({adBreaks: adsArray});

The ads are played in order based on timestamps. It is obvious that you can't play ads for live video. Live video duration is infinitive, timestamps cannot be calculated. Unfortunately, there is a bug in the cast API by Google (not the only one), so when you define ads, possible captions/subtitles will not appear on the screen.
Single VAST ad object is defined like below:

Code snippet

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

Single video ad object is defined like 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
}

You can merge multiple ad objects into one array and assign it as an adBreaks option of the Chromecast plugin. You may check example video with 4 ads (2 x Vast, 2 x video) and see what is Ad breaks array used in demo example. Chromecast ads are marked on the control bar (player and TV).

Chromecast for video playlist

The Pro version of the Chromecast plugin can play multiple videos from the playlist without reconnecting Chromecast, even if Chromecast API by Google is buggy for the video ended event. Each playlist's media item can have different tthubmnail, title and subtitle. Simply append chromecast options to playlist's media item, like in example below.

Code snippet

{
sources: [{
src: 'http://domain.com/path-to-playlist.m3u8',
type: 'application/x-mpegURL'
}],
title: 'video title',
thumb: 'https://domain.com/path-to-video-thumbnail.jpg', // Suggested size 80x45 px
poster: 'https://domain.c0m/path-to-poster.jpg',
duration: '03:40',
metaTitle: 'title for chromecast',
metaSubtitle: 'subtitle for Chromecast',
metaThumbnail: 'https://path-to-chromecast-thumbnails.jpg'
}

You don't need to define [metaTtitle] attribute if [title] is already defined. If [metaThumnail] not defined, the Chromecast plugin takes [poster] attribute to display Chromecast thumb.