Videojs Chromecast Plugin

Video.JS Chromecast Plugin v4.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 supports Chromecast (desktop Chrome, Edge, Opera, Chrome on Android). Chromecast plugin also works on desktop Edge Chromium browser if you enable specific Edge extension "Load Media Router". The plugin automatically detects Chromecast support and displays Chromecast Button in 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 player skin CSS, best in <head> section:
<link href="//www.domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet">
// Load necessary scripts:
<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 setup tech order through videojs options, just like below.

Code snippet

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

The latest version of Chromecast plugin allows to setup title and subtitle to appear on casting device through plugin's options.

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's 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 top left corner of the player. You can also show it as one of buttons in controlbar, right before fullscreen button.

Code snippet

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

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 casting, 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 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/....

How to change video without dosconnecting Chromecast