Стильные специфические сигналы WebVTT - PullRequest
Новая
       47

Стильные специфические сигналы WebVTT

0 голосов
/ 22 февраля 2019

Я немного углубился в тонкости HTML5 и поиграл с API видео.

В любом случае, Я прочитал, что формат WebVTT позволяет применять правила CSS к отображаемым подсказкам.на видео благодаря псевдоэлементу ::cue.

Теоретически вы можете написать эти правила непосредственно в файле WebVTT, но это еще не стандартизировано, поэтому ни один крупный браузер не реализует эту функцию на данный момент.Чтобы обойти это ограничение, можно написать правила CSS вне файла WebVTT, например, в стиле документа HTML: 

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).Но эти два селектора не работают ни в одном браузере, даже с трюком, который я дал ранее.

Если не выполнить правильную реализацию, я не могу найти обходного пути для стилизации определенной реплики, потому что реплики не 'Я не могу использовать селекторы CSS.

Если решение существует, я могу принять его, если оно подразумевает использование объектов JavaScript, таких как TextTrack или VTTCue .

Спасибо за помощь.

...