使用 videojs 样式文本轨道答案

【问题标题】：Style text track using videojs使用 videojs 样式文本轨道
【发布时间】：2017-08-03 22:14:06
【问题描述】：

有没有办法设置 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':{},
        }
    }
});

【问题讨论】：

标签： html5-video video.js

【解决方案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();
});

【讨论】：

这里是文档的链接：docs.videojs.com/texttracksettings#setValues，如果你想获得它们，你可以使用：docs.videojs.com/texttracksettings#getValues

【解决方案2】：

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

颜色
不透明度
可见度
文字装饰
文字阴影
背景
大纲
字体
行高
空白

例如：

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

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

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

【讨论】：