Videojs Chromecast Captions

Chromecast - subtitles while casting

Latest version of Chromecast Plugin by Nuevodevel allow you to use and display text tracks in in WebVTT format. A media item may have multiple subtitles (each for a different language). The easiest way to use subtitles is to provide subtitle WebVTT file URL as <track> tag of the <video> element. You should mark one of subtitles as default, or the first subtitle in a row will be loaded.

Code snippet

<video id="example_video_1" class="video-js" controls preload width="640" height="360" poster="path-to-poster.jpg" controls playsinline>
 <source src="//domain.com/video.mp4" type="video/mp4" res="720" label="720p">
 <track kind="captions" src="//domain.com/path/to/captions_en.vtt" srclang="en" label="English" default>
 <track kind="captions" src="//domain.com/path/to/captions_de.vtt" srclang="de" label="German">
 <track kind="captions" src="//domain.com/path/to/captions_fr.vtt" srclang="fr" label="French">
</video>

The full setup code for a player with chromecast support, media file and subtitles may look like:

Code snippet

<head>
  <link href="//domain.com/videojs/skins/skinname/videojs.min.css" rel="stylesheet" />
</head>

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

<video id="player_one" class="video-js" controls preload playsinline width="640" height="360" crossorigin="anonymous" poster="//www.domain.com/path/to/poster.jpg">
   <source src="//www.domain.com/path/to/video.mp4" type="video/mp4" />
   <track kind="captions" src="//domain.com/path/to/captions_en.vtt" srclang="en" label="English" default>
   <track kind="captions" src="//domain.com/path/to/captions_de.vtt" srclang="de" label="German">
   <track kind="captions" src="//domain.com/path/to/captions_fr.vtt" srclang="fr" label="French">
</video>

<script>
   var options = {option1:'option', option2:'option2'}; // Nuevo plugin options
   var player = videojs('player_one'); 
   player.nuevo (options);
   player.chromecast({ metatitle: 'video title', metasubtitle: 'video subtitle' });
</script>

Chromecast plugin options metatitle and metasubtitle are optional. It shows media title and subtitle on both, player container and chromecast receiver.
If you prefer Chromecast button in controlbar (right from fulscreen button) than bigger button in top-left corner of the player you can use another Chromecast plugin option button:'controlbar'.
Chromecast plugin also allow to increase/decrease captions text size by setting option tracksScale. The default value is 1.0.

Code snippet

player.chromecast({ metatitle: 'video title', metasubtitle: 'video subtitle', button:'controlbar', tracksScale: 1.2 });

If you want to enable subtitle Tracks for any media, you must enable CORS for both your track streams and your media streams. If you do not have CORS headers available even for your simple mp4 media on your server, and you then add a simple subtitle track, you will not be able to stream your media unless you update your server to include the appropriate CORS headers.
Read more on https://developers.google.com/cast/docs/...
You mau also need to set crossorigin attribute for video tag, e.g. crossorigin="anonymous".