HTML5 <audio> textTrack.kind=subtitles cueChange event not working in FireFox

Question

UPDATE:

This issue no longer existing FireFox, cuechange now works. Embedded base64 images also render.

The original code is a simple implementation of am

Answer 1

Patches have now been added to mozilla-inbound to get these firing for media elements (it now works for video). I will now be fixing the audio side, which just doesn't fire because there's no subtitle window.

https://hg.mozilla.org/integration/mozilla-inbound/rev/8935a32269a5 https://hg.mozilla.org/integration/mozilla-inbound/rev/e1d06acdeb7b https://hg.mozilla.org/integration/mozilla-inbound/rev/9f4d815bb9af

Answer 2

Firefox still (!) doesn't support oncuechange (as of v38.0, May 2015). However, you can usually use video.ontimeupdate to achieve almost exactly the same thing, e.g.:

var videoElement = $("video")[0];
var textTrack = videoElement.textTracks[0];
if (textTrack.oncuechange !== undefined) {
  $(textTrack).on("cuechange", function() { ... });
} else {
  // some browsers don't support track.oncuechange, so...
  $(videoElement).on("timeupdate", function() { ... });
}

Answer 3

Thanks for answer from avaunt! I think there is a typo in initial code. When I tested it both in FireFox and IE, it didn't work.

The line in question is

a = v[i].activeCues;

and it should read

a = t[i].activeCues;

since activeCues is a property of the textTracks object, not video object. After this change, it works!

I tried to make this post as a reply to his post, but system did not let me. So adding it as an answer.

Answer 4

Still not fixed as of v39, August 2015. Here's the ugly workaround I've been putting together to check for changes to the activeCues list. It's working as a proof of concept, now I need to rewrite my code for browsers that do properly support onCueChange so the fallback happens properly.

var v = document.getElementsByTagName('video')[0];
var t = v.textTracks;
var la = [];
for(l = 0; l < t.length; l++){
    la[l] = '';
};

var onchangeTest =  (function isEventSupported(eventName) {
    var isSupported = ('oncuechange' in t[0]);
    if (isSupported) {
        return true;
    } else {
        return false;
    };
})();

v.ontimeupdate = function(){
    if(!onchangeTest){
        var activeCues ="";
        var delim ="";
        for(i = 0; i < t.length; i++){
            if(t[i].kind == 'captions' || t[i].kind == 'subtitles'){
                delim = "<br />";  
            } else {
                delim = "\n";
            };
            a = v[i].activeCues;
            if(a){
                var tt = '';
                for(ii = 0; ii < a.length; ii++){
                    tt += a[ii].text + delim;  
                    if(tt !== la[i]){
                        la[i] = tt;
                        console.log('tt: ' + tt + ' la[' + i + ']: ' + la[i]);
                    };
                };
            };
        };
    };
};