I am using https://plyr.io/ to have a video player with captions. (Documentation: https://github.com/sampotts/plyr).
I call the polyfilled plyr library (https://cdn.plyr.io/3.5.6/plyr.polyfilled.js) via the CDN for the moment (Currently I am only on a test phase, once everything works fine I will use the files system, not the CDN).
The problem is that on Internet Explorer (IE11) I get double captions. See below:
The issue appears only on this IE browser. On other browsers I only have the captions with the blue background which is good (I guess they are generated by JavaScript via the WebVTT file).
I don't want the native ones (in white and without background).
So how to delete these unwanted captions to only have the customized ones?
Ps: English captions are set by default in my code, and when I select another language such as French which is not the default language, the captions with blue background disappears, only the white captions are displayed which is not good.
See below:
Additionally I noticed a JS error in the console only for IE that says: "unexpected call to method or property access". See below:
Any idea?
Is it something to tell to the developer of https://plyr.io/ or is it only on my side?
PPS: I also think it is related to the "polyfilled" script that I call in the of my HTML document. Maybe there is something to set here.
Thank you.
// Here I initialize the "plyr" with its options (You can set debug to true if you want)
const player = new Plyr('#player', {
captions: {
active: true,
update: false,
language: 'en'
},
debug: false
});
// var video = document.getElementById('player');
// player.config.captions.active = false;
// video.textTracks[0].mode = "showing";
// console.log('video.textTracks[0].mode = ' + video.textTracks[0].mode);
// console.log('player.config.captions.active = ' + player.config.captions.active);
// This is only to display captions for the demo, the issue is not there
function parse_timestamp(s) {
var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);
if (match == null) {
throw 'Invalid timestamp format: ' + s;
}
var hours = parseInt(match[1] || "0", 10);
var minutes = parseInt(match[2], 10);
var seconds = parseFloat(match[3].replace(',', '.'));
return seconds + 60 * minutes + 60 * 60 * hours;
}
// https://w3c.github.io/webvtt/
// https://developer.mozilla.org/en/docs/Web/API/Web_Video_Text_Tracks_Format
// https://en.wikipedia.org/wiki/WebVTT
//
// For better parsers, look at:
// https://github.com/annevk/webvtt
// https://github.com/mozilla/vtt.js
function quick_and_dirty_vtt_or_srt_parser(vtt) {
var lines = vtt.trim().replace('\r\n', '\n').split(/[\r\n]/).map(function(line) {
return line.trim();
});
var cues = [];
var start = null;
var end = null;
var payload = null;
for (var i = 0; i < lines.length; i++) {
if (lines[i].indexOf('-->') >= 0) {
var splitted = lines[i].split(/[ \t]+-->[ \t]+/);
if (splitted.length != 2) {
throw 'Error when splitting "-->": ' + lines[i];
}
// Already ignoring anything past the "end" timestamp (i.e. cue settings).
start = parse_timestamp(splitted[0]);
end = parse_timestamp(splitted[1]);
} else if (lines[i] == '') {
if (start && end) {
var cue = new VTTCue(start, end, payload);
cues.push(cue);
start = null;
end = null;
payload = null;
}
} else if (start && end) {
if (payload == null) {
payload = lines[i];
} else {
payload += '\n' + lines[i];
}
}
}
return cues;
}
function init() {
// http://www.html5rocks.com/en/tutorials/track/basics/
// https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
var video = document.querySelector('video');
var subtitles = document.getElementsByTagName('script');
Array.prototype.slice.call(subtitles)
.filter(node => node.type === "text/vtt")
.map((subtitle, index) => {
var track = video.addTextTrack('subtitles', subtitle.dataset.label, subtitle.dataset.lang);
var first_sub = index == 0 ? "showing" : "hidden";
track.mode = first_sub;
quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
track.addCue(cue);
});
});
}
init();#container {
width: 60%;
margin: 15px auto;
}
.plyr__captions .plyr__caption {
background: #0066a1 !important;
font-family: Cambria;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.plyr.io/3.5.6/plyr.css" rel="stylesheet" />
<script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
<div id="container">
<video controls crossorigin playsinline poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" id="player" class="img-responsive">
<!-- Video file -->
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
<!-- Caption files -->
<!--
<track label="English" kind="subtitles" srclang="en" src="my-en-subtitles.vtt" crossorigin default>
<track label="Portuguese" kind="subtitles" srclang="pt" src="my-pt-subtitles.vtt" crossorigin>
-->
<script type="text/vtt" id="subtitle" data-label="English" data-lang="en">
WEBVTT
1
00:00:02.500 --> 00:00:05.250
WebVTT directly embeded
2
00:00:05.250 --> 00:00:09.750
inside a script tag
3
00:00:10.000 --> 00:00:13.000
for the demo.
4
00:00:14.000 --> 00:00:17.000
Test
5
00:00:18.000 --> 00:00:20.000
...
6
00:00:21.000 --> 00:00:22.000
...
</script>
<script type="text/vtt" id="subtitle-2" data-label="French" data-lang="fr">
WEBVTT
1
00:00:02.500 --> 00:00:05.250
WebVTT directement inséré
2
00:00:05.250 --> 00:00:09.750
dans un script
3
00:00:10.000 --> 00:00:13.000
pour la demonstration.
4
00:00:14.000 --> 00:00:17.000
Test
5
00:00:18.000 --> 00:00:20.000
...
6
00:00:21.000 --> 00:00:22.000
...
</script>
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
</div>