Video.js：如何仅在自定义TextTrackDisplay显示字幕，隐藏视频上方字幕

问题描述 #

我已经实现了在视频播放区域外的自定义DOM元素中显示Video.js字幕，但目前无法隐藏视频上方同步显示的默认字幕。字幕选项（addRemoteTextTrack(options)）和textTrackSettings.setValues()中的设置会同时影响视频内与自定义字幕，请问如何仅在自定义TextTrackDisplay元素中展示字幕，同时禁用视频上方的字幕？

相关代码片段：

let captionOption = {
    kind: 'captions',
    srclang: 'en',
    label: 'English',
    src: subURL,
    mode: 'showing',
};

connectTextTracks = (player) => {
    const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
    const textTrackDisplay = new TextTrackDisplay(player);
    subtitleDiv.appendChild(textTrackDisplay.el());
}

player.ready(function () {
    player.addRemoteTextTrack(captionOption);
    const tracks = player.remoteTextTracks();
    console.log(tracks.length); // 存在字幕时输出大于0的数值

    var settings = this.textTrackSettings;

    settings.setValues({
        backgroundColor: '#000',
        backgroundOpacity: '1',
        edgeStyle: 'uniform',
    });
    settings.updateDisplay();

    connectTextTracks(player);
});

解决方案 #

核心思路是隐藏Video.js默认渲染在视频内的TextTrackDisplay组件，只保留自定义的外部字幕显示元素，具体操作如下：

在player.ready回调函数中，添加隐藏默认字幕容器的代码，最终整合后的代码如下：

player.ready(function () {
    player.addRemoteTextTrack(captionOption);
    const tracks = player.remoteTextTracks();
    console.log(tracks.length); // 存在字幕时输出大于0的数值

    var settings = this.textTrackSettings;

    settings.setValues({
        backgroundColor: '#000',
        backgroundOpacity: '1',
        edgeStyle: 'uniform',
    });
    settings.updateDisplay();

    connectTextTracks(player);

    // 隐藏默认的视频内字幕显示
    const defaultCaptionDisplay = player.getComponent('TextTrackDisplay');
    if (defaultCaptionDisplay) {
      defaultCaptionDisplay.el().style.display = 'none';
    }
});

设置完成后，视频内的默认字幕会被隐藏，只有挂载到subtitleDiv中的自定义字幕元素会正常显示，同时字幕样式设置仍会同步应用到自定义字幕上。

内容的提问来源于stack exchange，提问作者Burnhill