Question

我深入研究了HTML5的复杂性，并使用了视频API。

无论如何，I read that借助::cue伪元素，WebVTT格式允许将CSS规则应用于视频显示的提示。

从理论上讲，您可以直接在WebVTT文件中编写这些规则，但尚未标准化，因此，到目前为止，没有主流浏览器实现此功能。规避此限制的一种方法是在HTML文档样式中将WebVTT文件之外的CSS规则编写为：

const vtt = `WEBVTT

intro
00:00:00.000 --> 00:00:05.000
Goodbye Moon

intro
00:00:05.000 --> 00:00:10.000
Hello Sun
`;

document.addEventListener("DOMContentLoaded", () => {
  const track = document.getElementById("track");
  track.src = "data:text/plain,"+encodeURIComponent(vtt);
});

video::cue {
  font-family: Georgia, serif;
  font-size: 20px;
  letter-spacing: -1.6px;
  word-spacing: 0.8px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  font-variant: small-caps;
  text-transform: capitalize;
  background-color: transparent;
}

<video id="video" width="60%" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
  <track default id="track" />
</video>

API还将提供一种样式来匹配特定标识符的提示，例如::cue(#intro)。它还将允许使用特定字体装饰来设置提示样式，例如所有粗体提示：::cue(b)。但是，即使使用我之前提到的技巧，这两个选择器也无法在任何浏览器上使用。

如果没有正确的实现，我将无法通过任何变通办法来设置特定的提示，因为这些提示在DOM中不存在，因此我无法使用CSS选择器。

如果存在解决方案，则意味着可以使用TextTrack或VTTCue之类的JavaScript对象。

谢谢您的帮助。

样式特定的WebVTT提示

0 个答案: