使用 videojs 设置文本轨道样式

Question

有没有办法设置 videojs 字幕的样式？

设置nativeTextTracks为 false，我可以看到该插件正在渲染自己的标题。为每行文本创建一个新的 div，并且该 div 的样式是内联的。我尝试将设置发送到播放器 init，但 videojs 文档在这方面有点缺乏。

var player = videojs('my_video', {
    'html5': {
        nativeTextTracks: false
    },
    textTracks: {
        ??? maybe something here ???
    },
    'fluid': true,
    controlBar: {
        children: {
            'playToggle':{},
            'currentTimeDisplay':{},
            'timeDivider':{},
            'durationDisplay':{},
            'progressControl':{},
            'fullscreenToggle':{},
        }
    }
});

Answer 1

这是一个未记录的功能。您可以通过阅读TextTrackSettings源代码了解更多信息。基本上，您需要调用setValues播放器的设置，然后使用以下命令应用设置updateDisplay：

let player = videojs('my_video');
player.ready(function(){
    var settings = this.textTrackSettings;
    settings.setValues({
        "backgroundColor": "#000",
        "backgroundOpacity": "0",
        "edgeStyle": "uniform",
    });
    settings.updateDisplay();
});