使用 Webvtt 的字幕中的 HTML5 图形答案

【问题标题】：HTML5 Graphics in Subtitles using Webvtt使用 Webvtt 的字幕中的 HTML5 图形
【发布时间】：2013-04-19 08:26:30
【问题描述】：

我正在尝试在 HTML5（使用 Chrome）中由 <track>-Element 显示的视频字幕（Webvtt 格式）中实现很少的图形。到目前为止，我使用 content:url() 或 background-image:url() 尝试使用 CSS，但没有成功。有人对我如何解决我的问题有任何想法或提示吗？

提前致谢

【问题讨论】：

标签： html video subtitle

【解决方案1】：

1/ 您可以尝试使用 z-index 在视频标签上添加 div，并且不要使用轨道。 2/ 然后你编写 javascript 函数，用你的字幕更新 div 3/你可以'css'它;）

【讨论】：

我试图在不使用 javascript 的情况下实现这一目标

【解决方案2】：

像这样使用 ::cue 选择器：

::cue {
  color: #FFF;
  background: transparent;
  text-shadow: black 0 0 0.2em;
  font: 1.2em sans-serif;
}

【讨论】：