Videojs Chromecast Plugin

Video.JS Chromecast Plugin v2.0

VideoJS Chromecast Plugin by Nuevodevel works fine with browsers that supports Chromecast (desktop Chrome, Opera, Chrome on Android). 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 examples of player, nuevo plugin and chromecast plugin setup code.

Code snippet

// Load necessary script:
<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' });

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' });

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.
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