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

可以在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
}

video::cue {
  // add style here
}

这似乎有点混淆了Safari。它可以工作，但是渲染过程中有很多问题

---

但更重要的是：如何在Firefox和IE上实现这一点？

这是在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
}

你也可以从这些链接中获得一些信息

将此用于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
}

video::cue {
  // add style here
}

火狐：

尚未得到支持。打开bug实现：：cue伪元素-

编辑：

---

对FireFox的支持是可用的，它的工作原理与Chrome和Opera中的类似。但是Edge或IE尚不支持。

到目前为止，我找到的唯一跨浏览器解决方案是：隐藏视频的文本轨迹并使用您自己的。

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

为此，您可以利用文本提示的oneter和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();

---

我开始将我的字幕设计成黑色背景，并放置在Safari和Chrome视频的下方。我成功地使用了以下代码，并使用以下样式编辑了.vtt文件。注意：您必须将样式添加到.vtt文件中，否则在safari中，当视频控件（即使隐藏）出现时，您的字幕将跳转：

4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100%
for just the summer but I ended up staying here.

chrome和safari标题的样式：

Chrome使用video:：cue背景色和不透明度

video::cue {
  opacity: 1;
  background-color: black;
  font-size: 20px !important;
}

Safari使用-webkit媒体文本跟踪显示背景作为背景色。注意！重要的是，它超越了Safari固有的风格

video::-webkit-media-text-track-display-backdrop {
  background-color: black !important;
  overflow: visible !important;
}

以下webkit媒体文本轨迹显示溢出允许在Chrome标题文本周围添加更多填充：

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

溢出可见在以下Safari代码中很重要，我正在使用转换设置视频下方的标题，这取决于固定的字体大小：

video::-webkit-media-text-track-container {
 overflow: visible !important;
 transform: translateY(30%) !important;
}

编辑

经过一些调整，我最终将此用于我的项目：

重要提示：从.VTT文件中删除所有内联样式

确定用户使用的是chrome还是safari

const rootElement = document.getElementById('root');
const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

rootElement.className += "web";
if(M[1] === 'chrome'){
  rootElement.className += " chrome";
} else {
  rootElement.className += " safari";
}

然后在SASS.scss文件中使用以下样式。注意：如果不使用SASS，只需为视频元素创建一个类并嵌套相应的样式即可

.chrome {
  video::cue {
    font-size: 24px;
    opacity: 1;
    background-color: black;
    -webkit-transform: translateY(10%) !important;
    transform: translateY(10%) !important;
  }

  video::-webkit-media-text-track-display {
    overflow: visible !important;
    -webkit-box-sizing: border-box;
    background: black;
    padding: 8px;
    border-radius: 16px;
  }


  video::-webkit-media-text-track-container {
    overflow: visible !important;
    -webkit-transform: translateY(40%) !important;
    transform: translateY(40%) !important;
    position: relative;
  }
}

.safari {
  video::cue {
    font-size: 24px;
    opacity: 1;
    background-color: black;
  }

  video::-webkit-media-text-track-display-backdrop {
    background-color: black !important;
    overflow: visible !important;
  }

  video::-webkit-media-text-track-display {
    overflow: visible !important;
    -webkit-box-sizing: border-box;
  }

  video::-webkit-media-text-track-container {
    overflow: visible !important;
    -webkit-transform: translateY(20%) !important;
    transform: translateY(20%) !important;
    position: absolute;
  }
}

---

源代码没有直接提到该属性，但是链接到的跨浏览器信息很好，包括插件列表，您可能需要为此更新答案。遗憾的是，firefox没有

媒体文本曲目

内容。链接1不包含样式信息，链接2中提出的解决方案需要重写字幕/标题文件。所以这不是一个纯粹的css解决方案。一些基于音频而非视频的相关问题，谢谢。没有解决问题，但无论如何都很有趣…；-）你太棒了！！作为mp3文件字幕的跨浏览器解决方案，它的工作非常出色。