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

Posted 2023-03-06

【中文标题】如何通过 CSS 为 HTML5 视频中的文本轨道设置样式？

【英文标题】：How to style text tracks in HTML5 video via CSS?

【发布时间】：2015-11-22 00:15:27

【问题描述】：

是否可以在 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 如何做到这一点？

【问题讨论】：

一些基于音频而非视频的相关问题***.com/questions/4126708/…***.com/questions/17129640/…

谢谢。不能解决问题，但无论如何都很有趣...... ;-)

【参考方案1】：

这适用于 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

您还可以从这些链接中获取一些信息。

Link 1

Link 2

【讨论】：

来源没有直接提及该属性，但链接到的跨浏览器web VTT 信息很好，包括插件列表，您可能需要为此更新答案。另见advprog.blogspot.co.uk/2013/07/…

遗憾的是，Firefox 不存在 media-text-track 的东西。链接 1 不包含有关样式的信息，链接 2 中提出的解决方案需要重写字幕/字幕文件。所以这不是一个纯粹的 css 解决方案。

【参考方案2】：

将此用于 Chrome：

video::cue 
  // add style here

火狐：

尚不支持。打开错误以实现 ::cue 伪元素 - https://bugzilla.mozilla.org/show_bug.cgi?id=865395

编辑： 提供对 FireFox 的支持，它的工作方式与在 Chrome 和 Opera 中的工作方式类似。但目前还不支持 Edge 或 IE。

【参考方案3】：

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

这将允许您创建自己的文本节点，包括类、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();

【讨论】：

你摇滚！！作为为 mp3 文件添加字幕的跨浏览器解决方案，这非常棒。

【参考方案4】：

我开始将我的字幕设置为黑色背景，并位于 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-media-text-track-display-backdrop 作为背景色。请注意覆盖 Safari 固有样式的 !important。

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

以下 webkit-media-text-track-display 溢出允许在 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;