Trying to set up closed captions for chromecast using the default Chrome sender app but it's not working. The code is similar to the sample provided in the docs, seen here.
I've shared a snippet that might be too sandboxed, view it on a normal html page:
Click here!
First connect your Chromecast using the top button, then click "load video".
Snippet Code:
var suburl = 'https://cors-anywhere.herokuapp.com/brenopolanski.com/html5-video-webvtt-example/MIB2-subtitles-pt-BR.vtt';
var mediaurl = 'https://cors-anywhere.herokuapp.com/www.w3schools.com/html/mov_bbb.mp4';
var mediaInfo;
window['__onGCastApiAvailable'] = function(isAvailable) {
if (isAvailable) {
initializeCastApi();
}
};
initializeCastApi = function() {
cast.framework.CastContext.getInstance().setOptions({
receiverApplicationId:
chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});
var englishSubtitle = new chrome.cast.media.Track(1, // track ID
chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = suburl;
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;
mediaInfo = new chrome.cast.media.MediaInfo(mediaurl);
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = textTrackStyle
mediaInfo.duration = null;
mediaInfo.tracks = [englishSubtitle];
mediaInfo.activeTrackIds = [1];
};
function loadVideo() {
var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
function() { console.log('Load succeed'); },
function(errorCode) { console.log('Error code: ' + errorCode); });
}.cast-button, .load-button {
max-width: 50px;
max-height: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Sample chromcast</title>
</head>
<body>
<div class="cast-button">
<google-cast-launcher></google-cast-launcher>
</div>
<button class="load-button" onclick="loadVideo()"> Load video </button>
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
</body>
</html>