列出多语言字幕 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;?>

解决方法

您可以拆分字符串、遍历它并添加多个轨道。见How can I explode and trim whitespace?

您需要更多信息来添加 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);
});

javascript video.js