使用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 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();
});

Answer 2

当我需要添加填充时，我也遇到过同样的问题。我调查了很多，发现cue只能作用于以下属性：

1. color
2. opacity
3. visibility
4. text-decoration
5. text-shadow
6. background
7. outline
8. font
9. line-height
10. white-space

例如的：

Ex : 1
video::cue {
   color:#ccc;
}

Ex : 2
video::cue {
   outline:5px solid gray;
}

所以我们只需要将css应用于video::cue，就可以在任何视频播放器中播放字幕轨道文本