我正在使用https://plyr.io/来制作带字幕的视频播放器。（文档：https ://github.com/sampotts/plyr ）。
我暂时通过 CDN 调用 polyfill plyr 库（https://cdn.plyr.io/3.5.6/plyr.polyfilled.js）（目前我只处于测试阶段，一旦一切正常，我将使用文件系统，而不是 CDN）。
问题是在 Internet Explorer (IE11) 上我得到了双字幕。见下文：
该问题仅出现在此 IE 浏览器上。在其他浏览器上，我只有蓝色背景的标题，这很好（我猜它们是由 JavaScript 通过 WebVTT 文件生成的）。
我不想要本地的（白色且没有背景）。
那么如何删除这些不需要的字幕以仅具有自定义的字幕呢？
Ps：我的代码中默认设置了英文字幕，当我选择了另一种语言（例如法语）不是默认语言时，蓝色背景的字幕消失了，只显示了白色的字幕，这不好。
见下文：
此外，我注意到控制台中的 JS 错误仅为 IE 显示：“意外调用方法或属性访问”。见下文：
任何想法？
是要告诉https://plyr.io/的开发者还是只在我这边？
PPS：我还认为这与我在 HTML 文档中调用的“polyfill”脚本有关。也许这里有一些东西要设置。
谢谢你。
// 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>