Videojs Chromecast Plugin

Chromecast Plugin v 4.5

Chromecast is a device developed by Google that simply plugs into a TV for playback of content from a smartphone, tablet, PC or laptop. Since 2013, Google sold more than 30 million Chromecasts.
VideoJS Chromecast Plugin by Nuevodevel works fine with browsers that support Chromecast (desktop Chrome, Edge, Opera, Chrome on Android). The plugin automatically detects Chromecast support and displays Cast Button in the top right corner of the player. If you have Chromecast device connected to your TV you can test demo video above.

See example of the video.js player, with Nuevo plugin and Chromecast plugin setup code.

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>

It is important to load Chromecast plugin after Nuevo plugin or you will have to set up tech order through videojs options, just like below.

Code snippet

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

By default chromecast button appears in top-left corner of the player if only chromecast device detected.
You can also decide to show chromecast icon in control bar instead of player's top-left corner.

Code snippet

player.chromecast({ button: "controlbar" });

The plugin allows to setup title and subtitle options to appear on casting device.

Code snippet

player.chromecast({ metaTitle: 'video title', metaSubtitle: 'video subtitle' });

Chromecast plugin by Nuevodevel.com supports audio tracks playback through Video.js player with Nuevo plugin. It also allows to display audio track details like album cover, album name, artist name and track title. For more details, check Audio Demo example.

Yeat another plugin option to set is Chromecast button position. By default it's showing in the top left corner of the player. You can also show it as one of the buttons in controlbar, right before fullscreen button.

Code snippet

Two events are fired by the plugin when Chromecast connected and disconnected from TV device. 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.
When you plan to cast some media, remember to use full absolute URL for each media source, and possible subtitle tracks, not relative paths. Since version 4.0 Chromecast plugin by Nuevodevel supports audio playback, including on screen information and album cover if only specified by the user.
You must also remember about the presence of CORS headers on the server if your media files are located on other than production server or when using adaptive media streaming (HLS/DASH), or when you include subtitle tracks. Read more on https://developers.google.com/cast/docs/....