Videojs Chromecast Plugin

Video.JS Chromecast Plugin

Silvermine VideoJS Chromecast Plugin slightly modified 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.
For mroe setails about Chromecast plugin support in browsers and devices, about tweaks by Nuevodevel check our blog.

See examples of player, nuevo plugin and chromecast plugin setup code.

 // Load necessary script:
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/plugins/videojs-chromecast.min.js"></script>
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script src="//domain.com/videojs/nuevo.min.js">

 // Setup your video
 <video id="player_one" class="video-js vjs-default-skin" 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 with chromecast tech and plugins
<script>
	var player = videojs('player_one',{techOrder:['chromecast','html5']}); 
	player.nuevo ({
		//option1: 'option value',
		//option2: 'option value'
	});
	player.chromecast();
</script>

Modified Chromecast plugin allows to display video title and subtitle on both: player and TV when connected and playing video. The most simple code setup is to provide single title and subtitle.

<script>
   requestCastTitle = function(source) { return 'Video title'; }
   requestCastSubtitle = function(source) { return 'Video subtitle'; } 
</script>

The more advanced usage of title and subtitle functions is to assign different title and/or subtitle to each variant of video URL.

<script>
   requestCastTitle = function(source) { 
      switch (source.src) {
         case 'video_url_1': return 'title 1'; break;
	 case 'video_url_2': return 'title 2'; break;
	 case 'video_url_3': return 'title 3'; break;
      }
   }
   requestCastSubtitle = function(source) { 
      switch (source.src) {
         case 'video_url_1': return 'subtitle 1'; break;
	 case 'video_url_2': return 'subtitle 2'; break;
	 case 'video_url_3': return 'subtitle 3'; break;
      }
   } 
</script>

In video example above we use 5 variants of same video, each of different resolution. For Chromecast title and subtitle we use same title for each video variant and different subttile according to video resolution.

<script>
   requestCastTitle = function(source) { 
      return 'Fitness keeps you healthy';
   }
   requestCastSubtitle = function(source) { 
      switch (source.src) {
         case 'path-to-240p.mp4': return 'Resolution 240p'; break;
	 case 'path-to-360p.mp4': return 'Resolution 240p'; break;
	 case 'path-to-480p.mp4': return 'Resolution 240p'; break;
	 case 'path-to-720p.mp4': return 'Resolution 720p HD'; break;
	 case 'path-to-1080p.mp4': return 'Resolution 1080p Full HD'; break;
      }
   } 
</script>

By default Chromecast button appears in top-left corner of the player. You can also decide to show Chromecast button within controlbar right before Fullscreen button.

 // Initialize player and plugins
<script>
	var player = videojs('player_one',{techOrder:['chromecast','html5']}); 
	player.nuevo ({
		//option1: 'option value',
		//option2: 'option value'
	});
	player.chromecast({ button: 'controlbar' });
</script>

Of course Chromecast button will not appear if Chromecast device not connected to TV.