Videojs Chromecast Captions

PREMIUM

GOLD

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="my_player" 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

<body>
<link href="//domain.com/videojs/skins/skinname/videojs.min.css" rel="stylesheet" />
<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="my_player" 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>

const player = videojs('my_player', {license: "key"});
const nuevo_options = {option1:'option', option2:'option2'}; // Nuevo plugin options
player.nuevo (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.

Code snippet

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

The Chromecast text tracks can be styled in multiple ways, available options are:

trackColor (text color and opacity)
trackBackground (background color and opacity)
trackEdgeType (NONE, OUTLINE, DROP_SHADOW, RAISED, DEPRESSED)
trackEdgeColor
trackScale (text Scale)
trackFont (font family) - (SANS_SERIF, MONOSPACED_SANS_SERIF, SERIF, MONOSPACED_SERIF, CURSIVE, SMALL_CAPITALS)
trackStyle (font style) - (NORMAL, BOLD, BOLD_ITALIC, ITALIC)

Code snippet

 {literal}player.chromecast({ trackColor:"#FFCC00FF", trackBackground:"#000000FF", tracksEdgeType:"NONE", trackScale:0.8, trackFont:"SERIF", trackStyle:"ITALIC" });{/literal}

Such plugin's setup will change caption text to a Serif italic font, yellow color on black background, without any edge style, reduced to 0.8% size. Please note that color values for Chromecast track are in HEX format with alpha channel.

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