1

Having played around alot with the Chromecast to find a good solution to closed captioning (in my project we already use TTML and segmented WEBVtt - both which does not work "as is") i was VERY supprised to find that my final bright idea, to manually add "new VTTCue()" to textTrack-element was unsupported.

I've read alot of answers to questions here where the answer is along the lines of "do it yourselves" like this one Does Chromecast support TTML?.

you can simply write a Javascript parser to parse the [ttml] file and add the cues to your video element in javascript using methods such as addTextTrack(), etc

Well, it does say that TTML IS supported here https://github.com/googlecast/CastClosedCaptioning-chrome but never mind.

So having failed to power-google the answer (code alternatives to VTTCue) I turn to thee professionals - how can I add Cues seing that VTTCue is not supported?

What I really really thought (hoped) would work:

loadTTML().done(function(ttml){
    var cueData = extractCueDataFromTTML(ttml);
    var vid = document.querySelector('video');

    vid.addTextTrack("subtitles", "sample");
    var track = vid.textTracks[0];

    cueData.forEach(function(cue){
        track.addCue(new VTTCue(cue.start, cue.end, cue.text))
    });
})

Note: this is to avoid writing a TTML to WEBVtt converter or segmented WEBVtt combiner

Community
  • 1
  • 1
Tobias
  • 93
  • 10

2 Answers2

1

Due to a change in Chrome, an upcoming update to Chromecast will require code changes to receiver apps that are doing closed captioning.

The Media Player Library has a fix for the change, so receivers using MPL will not be affected by the API change.

Developers that are not using MPL will need to change their receiver code if they are supporting closed captioning.

In Chrome M37, TextTrackCue still exists, but it cannot be instantiated directly. Instead, VTTCue needs to be instantiated.

To handle the difference, the following JavaScript polyfill is recommended for your receiver:

window['VTTCue'] = window['VTTCue'] || window['TextTrackCue'];

This ensures that VTTCue is always defined. Once the polyfill is in place, code that creates cues needs to be updated to create VTTCue objects instead of TextTrackCue.

Leon Nicholls
  • 4,623
  • 2
  • 16
  • 17
0

The Chromecast does not support VTTCue so what you have to use is the TextTrackCue constructor. I.e.

//...
cueData.forEach(function(cue){
    track.addCue(new TextTrackCue(cue.start, cue.end, cue.text))
});
//...
Tobias
  • 93
  • 10