Я использую https://plyr.io/, чтобы иметь видеоплеер с подписями. (Документация: https://github.com/sampotts/plyr).
В настоящее время я вызываю полизаполненную библиотеку plyr (https://cdn.plyr.io/3.5.6/plyr.polyfilled.js) через CDN (в настоящее время я только на стадии тестирования, как только все будет хорошо, я буду использовать файловую систему, не CDN).
Проблема в том, что в Inte rnet Explorer (IE11) я получаю двойные подписи. См. Ниже:
Эта проблема появляется только в этом браузере IE. В других браузерах у меня есть только заголовки с синим фоном, что хорошо (я думаю, они генерируются JavaScript через файл WebVTT).
Я не хочу нативные (в белом и без background).
Так как же удалить эти нежелательные заголовки, чтобы иметь только настроенные подписи?
Ps: Engli sh подписи установлены по умолчанию в моем коде, и когда я выбираю другой язык например, французский, который не является языком по умолчанию, надписи с синим фоном исчезают, отображаются только белые надписи, что не хорошо.
См. ниже:
Кроме того, я заметил ошибку JS в консоли только для IE, которая говорит: «неожиданный вызов метода или доступа к свойству». См. Ниже:
Любая идея?
Это что-то, чтобы сказать разработчику https://plyr.io/ или это только на моей стороне?
PPS: Я также думаю, что это связано с «полизаполненным» скриптом, который я вызываю в моем HTML документе. Может быть, здесь есть что установить.
Спасибо.
// 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>