是否可以将CSS应用于<track>元素

Question

因此，在编写自己的自定义HTML5视频播放器时遇到了问题。可以将任何CSS规则应用于<track>元素吗？有讨厌的骇客吗？我想控制<track>和的位置font-size。

<div id="movie-01">
<video id="video" controls preload="metadata">
   <source src="files/movie-01/movie.mp4" type="video/mp4">
   <track label="Chinese Traditional" kind="subtitles" srclang="cht" src="files/movie-01/cht.vtt" default>
</video>
</div>
<style>
    track{
      color: #FAFAFA;
      font-size: 1em;
    }
</style>

Answer 1

根据WebVTT，该<track>元素无法使用css 呈现，因此无法向其添加css。您可以更改特质和给定的特性cue，但除此之外不能更改。这是一个关于如何创造性地使用它们的不错的教程。最接近样式的是将其与div环绕，并将样式应用于div本身。对不起，没有讨厌的骗局。：/

编辑：有一个被禁止的令人讨厌的把戏，但这对凡人是非常危险的。当心，如果您接近这些技术，就会遇到最糟糕的错误和恶魔。

保护轨道

可以将给定的track元素嵌入受其保护的Audio元素内，因为它们都共享HTML5媒体播放器的不同种族。Mozilla文档的滚动条很好，可以帮助您完成任务；它包括以下内容：

<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

听不到任何规则

如前所述，这是一个禁止的预言，目前尚无使用CSS的音频播放器-但是，所选的音频播放器可以自己制作。他或她应保留该controls属性，并使用javascript从头开始实现控件。他们可能会以现有的音频播放器（例如您的儿时时代的朋友）部分实现的形式吸引一些关注者，以帮助他们。

由内而外的进攻

一旦选定的人掌握了js的各种样式控制技巧，他们就可以使用秘密的inner-trait-css-styling-non-justu并将样式添加到音频控件的内部元素中，其中之一就是音轨。

祝你好运，冒险家。如果您愿意，您将是第一个活着回来的人。如果可以的话，请告诉我们您打仗的故事。

Answer 2

我着手设置字幕的样式，使其具有黑色背景，并位于Safari和Chrome视频的下方。通过以下代码结合使用以下样式编辑.vtt文件，我已经取得了成功。请注意，您必须将样式添加到.vtt文件中，否则在野生动物园中，当视频控件（即使它们被隐藏）出现时，字幕也会跳来跳去：

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和野生动物园字幕的样式：

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

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

Safari使用-webkit-media-text-track-display-backdrop作为背景色。请注意！important会覆盖Safari的固有样式。

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;
  -webkit-transform: translateY(20%) !important;
  transform: translateY(20%) !important;
  position: absolute;
}

编辑

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

重要提示：从.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，则可以简单地为video元素创建一个类并嵌套相应的样式。

.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;
   }
}