html - 如何通过 CSS 在 HTML5 视频中设置文本轨道的样式？

Question

是否可以在 HTML5 视频播放器中设置文本轨道(如字幕)的样式？

我已经为 Chrome 找到了这样做的方法:

video::-webkit-media-text-track-container {
    // Style the container
}

video::-webkit-media-text-track-background {
    // Style the text background
}

video::-webkit-media-text-track-display {
    // Style the text itself
}

这似乎让 Safari 有点困惑。它可以工作，但渲染有很多问题。

但更重要的是:如何为 Firefox 和 IE 实现这一点？

Answer 1

迄今为止我发现的唯一跨浏览器解决方案是:隐藏视频的文本轨道并使用您自己的文本轨道。

这将允许您创建自己的文本节点，带有类、id 等，然后可以简单地通过 css 设置样式。

为此，您将利用文本提示的 onenter 和 onexit 方法来实现您自己的文本节点。

var video   = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
    tracks  = video.textTracks[0],
    tracks.mode = 'hidden', // must occur before cues is retrieved
    cues    = tracks.cues;

  var replaceText = function(text) {
        $('WHERE_TEXT_GETS_INSERTED').html(text);
      },

      showText = function() {
        $('WHERE_TEXT_GETS_INSERTED').show();
      },

      hideText = function() {
        $('WHERE_TEXT_GETS_INSERTED').hide();
      },

      cueEnter = function() {
        replaceText(this.text);
        showText();
      },

      cueExit = function() {
        hideText();
      },

      videoLoaded = function(e) {
        for (var i in cues) {
          var cue = cues[i];
          cue.onenter = cueEnter;
          cue.onexit = cueExit;
        }
      },

      playVideo = function(e) {
        video.play();
      };


  video.addEventListener('loadedmetadata', videoLoaded);
  video.addEventLister('load', playVideo);
  video.load();