Plyr: [v3] Captions not showing in IE

[friday]

Captions are not showing in IE11 / Win 10. Possibly also Edge browser (not tested)

• No related error is shown.
• The .plyr_captions element still exists, and it has a span child which is empty. If you manipulate the span and add text it will appear correctly styled as in other browsers.

• [x] Issue does not already exist
• [x] Issue observed on https://plyr.io/beta

Environment

• Browser: Internet Explorer
• Version: 11
• Operating System: Windows
• Version: 10

Players affected:

• [x] HTML5 Video
• [ ] HTML5 Audio
• [ ] YouTube
• [ ] Vimeo

[friday]

I will try to fix this myself, but not right now. If someone beats me to it you're welcome to ;)

[friday]

Additional info: document.querySelector('video').textTracks[0].cues.length should be 7 for https://plyr.io/beta. It is in other browsers, but it's 0 in IE11. So this is the root cause it seems. Possibly format/mime-type related.

Actually according to the network tab in the "F12" dev tools it seems that it's not loading the vtt files at all.

[sampotts]

It's really weird. IE11 should support VTT files and I swear it did in testing before. I'll keep digging. Thanks for taking a look 👍

[friday]

Yes, VTT does work in IE11. I've also managed to get it to work now. Not sure exactly how. I'm pretty sure the only thing I did was upgrade to the latest beta version and remove some workarounds I had to use for the earlier beta. But it still doesn't work on https://plyr.io/beta which is the latest version. Nothing about the demo code looks wrong.

I'll keep the issue open until we understand what's causing it.

[friday]

If it helps, this page (uses beta 12 with #780 applied) works with IE11: https://workflow.studiotogo.com/view/59db9312345a8234c27c809b (beware the bad speech recognition)

[sampotts]

Done some more digging and it appears IE11 doesn't seem to like loading captions from a remote URL for whatever reason. Using a relative URL like you've done seems to work fine for me too. I'm thinking of moving v3 to master and using GitHub Pages to host plyr.io. Maybe that'll help solve it, at least for the demo/docs site.

[sampotts]

Looks like IE11 never worked with CORS VTT:

• https://github.com/videojs/video.js/issues/2073
• https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8832169/

I'm not going to restore all that code to load the captions with AJAX and the extra logic so might just add a note in the docs about it. IE11 numbers are dropping anyhow - currently 2.78% and my theory is often the longer developers support these turd browsers, the longer they stay around.

[friday]

Nice detective work! Could never have guessed this was the cause.

I think you're right that it shouldn't be Plyr's responsibility to fix IE11-specific bugs. In particular when it can be avoided by setting up a proxy.

I still tried to "fix" this for the general video element outside of plyr, mainly because I could borrow code from the subtitle editor I've been working on and "it shouldn't be that hard". I also don't think this will have any noticeable effect on how long this specific turd browser stays around.

Caveats:

• Must run before initializing Plyr or after player.destroy(); in the demo
• Only works in IE (also only needed in IE) and will possibly break things otherwise (or at the very least make unnecessary requests).
• Doesn't add any "default" caption.
• There is no event to listen for when the captions have been added (this could be added of course, but I mainly wanted to see if this _could_ be done).

function timeStringToSeconds (timeString) {
    return (timeString || '')
        .split(':')
        .map(Number)
        .reverse()
        .reduce(function(sum, curr, index) {return sum + (curr * Math.pow(60, index))}, 0);
}

if (window.TextTrackCue) {
    var videoSelector = "video";
    var video = document.querySelector(videoSelector);
    var tracks = Array.prototype.filter.call(video.children, function (child) { return child.nodeName === "TRACK"});
    tracks.forEach(function (track, trackIndex) {
        var xhr = new XMLHttpRequest();
        xhr.track = track;
        xhr.addEventListener('load', function() {
            var track = video.addTextTrack(xhr.track.kind, xhr.track.label, xhr.track.srclang);

            var cues = xhr.responseText
                .split(/[\r?\n]{2}\s*/)
                .filter(function(line) { return line.indexOf('-->') !== -1})
                .map(function(line){ return line.match(/([\d\:\.]*)\s*-->\s*([\d\:\.]*)\s*(.+)/)})
                .map(function(cueData){ return new TextTrackCue(timeStringToSeconds(cueData[1]), timeStringToSeconds(cueData[2]), cueData[3])});

            cues.forEach(function(cue) { track.addCue(cue); });
        });
        xhr.open('GET', track.src);
        xhr.send();
        // You have to actually remove the element since it's hard linked to the empty track and otherwise you get duplicates
        video.removeChild(track);
    });
}

[sampotts]

That looks good. We had something similar before.

I tried even downloading the captions with AJAX and then updating the src to be a base64 encoded data URI. Still nothing. Is there anything this browser supports? Apparently it's undocumented but IE11 only supports data URIs on:

• <object> (images only)
• <img>
• <input type="image">
• <a>
• and CSS declarations that accept a URL, e.g. background, background-image, etc

https://stackoverflow.com/questions/1207190/embedding-base64-images

[friday]

I remember I used to have to fight IE6 for many years just not to break the layout completely, then IE7, then 9 and now 11. I get more surprised when things actually work in IE than the opposite.

With the plethora of useful features supported by all the other major browsers that can't be properly polyfilled like proxy, async/await, css variables and webassembly I think IE11 will be dead soon after the coming-generation web libraries/framework start taking advantage of these.

[sampotts]

Oh man, IE6 🤕 I had to support that on a bank website for years purely because senior execs were forced to use it. So. Many. Hacks.

I think I have IE11 working using a blob instead

// Fix IE
if (browser.isIE && window.URL) {
    const elements = this.media.querySelectorAll('track');

    Array.from(elements).forEach(track => {
        const src = track.getAttribute('src');
        const href = utils.parseUrl(src);

        if (href.hostname !== window.location.href.hostname && [
            'http:',
            'https:',
        ].includes(href.protocol)) {
            utils
                .fetch(src, 'blob')
                .then(blob => {
                    track.setAttribute('src', window.URL.createObjectURL(blob));
                })
                .catch(() => {
                    utils.removeElement(track);
                });
        }
    });
}

[friday]

Nice!

[friday]

Closing as this was fixed/released and now working also for https://plyr.io/beta 👍