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

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

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

例如：

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

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

因此我们只需要将video :: cue应用于CSS即可在任何视频播放器中与字幕轨道文本一起播放

使用videojs样式文本轨道

2 个答案: