时间戳

首页 > 解决方案 > 列出多种语言字幕 video.js

javascript - 列出多种语言字幕 video.js

问题描述

这是我当前用于动态显示一种字幕语言的脚本。我想添加多种语言，这意味着track.src = "<?php echo $_product->closed_caption_link; ?>";将有 video-german-de.vtt、video-english-en.vtt（逗号分隔符）......有没有简单的方法来做到这一点

<?php if ($_product->closed_caption_link != ''): ?>
<script type="text/javascript">
var vidPlayer = document.getElementById('html5player');

vidPlayer.addEventListener("loadedmetadata", function() {
    track = document.createElement("track");
    track.kind = "captions";
    track.label = "English";
    track.srclang = "en";

    track.src = "<?php echo $_product->closed_caption_link; ?>";

    track.addEventListener("load", function() {
        this.mode = "showing";
        video.textTracks[0].mode = "showing"; // thanks Firefox
    });
    this.appendChild(track);
});
</script>
<?php endif;?>

标签： javascriptphpvideo.js

解决方案

您可以拆分字符串、循环播放并添加多个曲目。请参阅如何分解和修剪空白？

您需要更多信息才能添加label和srclang。如果文件名肯定总是像你的例子，你可以srclang从字符串中解析，也许有一个数组来查找标签。

$langs = ["de" => "Deutsch", "en" => "English"];

foreach (array_map('trim', explode(',', $_product->closed_caption_link)) as &$src) {
    preg_match('/.*-(..).vtt/m', $src, $matches);
    $lang = $matches[1];
    $label = $langs[$lang];
    ...
}

如果它们不是那么常规，则您需要以不同的方式考虑如何存储字幕轨道信息，也许是带有 lang 的对象。

由于从您使用 Video.js 的标签开始，您应该使用 Video'js addRemoteTextTracks()方法来添加曲目。启动 Video.js 后，您不应直接修改元素。

JS 部分会更像这样：

var vidPlayer = videojs(document.getElementById('html5player'));

vidPlayer.on('loadedmetadata', function() {
    vidPlayer.addRemoteTextTrack({
         src: '<?= $src ?>',
         kind: 'captions',
         srcLang: '<?= $lang ?>',
         label: '<?= $label ?>'
    }, false);
});

推荐阅读