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.<video id="example_video_1" class="video-js vjs-default-skin" 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:
<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 vjs-default-skin" 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 subtitle text size by setting option tracksScale. The default value is 1.0.
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.
Also don't forget to set crossorigin attribute for video tag, e.g. crossorigin="anonymous".