html5-video - 使用 videojs 样式文本轨道

Question

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

nativeTextTracks 设置为 false，我可以看到插件正在呈现他自己的标题。为每一行文本创建一个新的 div，并且该 div 的样式是内联的。我尝试将设置发送到播放器初始化，但 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 source code 找到了它。 .基本上，您需要对播放器的设置调用 setValues，然后使用 updateDisplay 应用设置:

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