Videojs Chromecast Captions

Chromecast subtitles

Chromecast Plugin by Nuevodevel allows to display text tracks in in WebVTT format on your casting device. A media item may have multiple subtitles in different languages. The easiest way to use subtitles is to provide WebVTT file URL as <track> tag of the <video> element. You should mark one of the tracks 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>

Plugin options metatitle and metasubtitle are optional, allow to display media title and subtitle on both, player container and chromecast receiver.
If you prefer Chromecast button in control bar (right from fulscreen button) than a bigger button in the top-left corner of the player you can use another Chromecast plugin option button:'controlbar'.

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 may also need to set crossorigin attribute for video tag, e.g. crossorigin="anonymous".