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, The <track> element cannot be rendered with css, thus there is no way to add css to it. You can change traits and the given cue, but nothing beyond that. Here's 一个很好的创造性使用教程。最接近样式的方法是用 div 包围它并将样式应用于 div 本身。对不起，没有讨厌的恶作剧。 :/

编辑：有一种被禁止的恶作剧，但它对凡人来说非常危险。当心，如果你接近这些技术，你会遇到你见过的最糟糕的错误和恶魔。

保护赛道

给定的音轨元素可以嵌入到音频元素中并受其保护，因为它们共享 HTML5 媒体播放器的不同种族。 mozilla 文档有一个 nice scroll 可以帮助您完成任务；它包括以下内容：

<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>

不听规矩

作为禁忌预言once mentioned, there's no implemented audio player which uses CSS - however, the chosen one could make their own. He or she shall leave the controls attribute off, and implement the controls from the scratch using javascript. They might get a few followers to assist them in the form of existing audio players partial implementation, such as your childhood friend.

由内而外的进攻

一旦被选中的人掌握了使用 js 进行样式控制的各种艺术，他们可以使用秘密的 inner-trait-css-styling-non-justu 并从音频中为内部元素添加样式控件 - 其中之一是轨道。

Good luck, adventurer. You'll be the first to ever come back alive, if you will. And if you will, please tell us the tale of your mighty battles.

Answer 2

虽然通常您不能使用普通的 CSS 来设置 track 的样式，但您可以使用 VideoJS 来完成。用于 VideoJS 视频播放器的 JavaScript 和 CSS 允许设置 track 的样式。您将希望使用 FireFox 尝试一切，因为（当前）Chrome 不允许显示 track，除非它已经在服务器上。我假设您正在离线使用 HTML 文件。

前往 http://www.videojs.com/ 并下载文件。从 .zip 和 open video-js.css 中提取文件。向下进入 REQUIRED STYLES (be careful overriding) 部分并找到 /* Text Track Styles */。在下方一点您会发现 .vjs-caption-settings。在这个 CSS 的中间你会看到 color: #FFF; 和 font-size: 12px;。玩得开心切换颜色。

我希望你和其他人会觉得这很有用。

VideoJS 文件的地图：

demo.captions.vtt 字幕。需要
demo.html 需要
font 与 CSS
lang 语言文件夹。真的不需要
video-js.css 编辑该文件。需要
video-js.less崩溃了CSS。不需要
video-js.min.css崩溃了CSS。不需要
video-js.swf 旧版浏览器的闪退。可选
video.dev.js 扩展的 JS。如果需要，用这个替换 video.js 。如果不使用 #10
video.js 崩溃的JS。 HTML 页面使用这个。将其替换为 video.dev.js。如果不使用 #9
video.novtt.dev.js不需要
video.novtt.js不需要

Answer 3

根据 HTML5 Video Caption Cue Settings in WebVTT 文章，您可以设置样式提示。

Answer 4

您可以使用

应用您的 css 样式

video::-webkit-media-text-track-display {
      color: #FAFAFA;
      font-size: 1em;
}

我可以使用字体大小和字体系列。这个网站上有更多详细信息 http://www.samdutton.com/track/shadowDOM.html

Answer 5

这里有很多不错的选择，但也许我的解决方案会对某人有所帮助。

在过去的一个项目中，我必须为其实施符合 FCC 的字幕样式选项，我最终使用了 VTT.js，它在 <div/> 或 [=11= 中呈现提示] 在 <video/> 之上。添加到达此节点的 css 规则，您可以完全 CSS 控制它。

Answer 6

我着手将我的字幕设置为黑色背景，并放置在 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;
  -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，您可以简单地为视频元素创建一个 class 并嵌套相应的样式。

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

CSS 可以应用于 <track> 元素吗

Can CSS be applied to <track> element

html

css

html5-video

保护赛道

不听规矩

由内而外的进攻