Стилизация WebVTT не применяется в простом примере - PullRequest
Новая
       102

Стилизация WebVTT не применяется в простом примере

0 голосов
/ 21 января 2019

Я пытался заставить субтитры .vtt работать с видео, используя этот простой HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    /* video::cue{
      color:yellow
    } */
    </style>
  </head>
<body>

<video width="600" height="400" controls>
  <source src="./MIB2.mp4" type="video/mp4">
  <track id="textTrack" label="pt" kind="subtitles" srclang="pt" src="./MIB2.vtt" default >
</video>

</body>
</html>

Я добавил некоторые цвета и стили в мой файл .vtt, но они не кажутсячтобы работать.

Например: VLC покажет все мои красные цвета (с), но как только я попробую его в Chrome 71, цвет не будет отображаться.Другие вещи, такие как болт, будут работать, но все же никакие дополнительные стили не применяются, как я дал.Я не знаю, почему это происходит или как это исправить.Это ошибка?Это также не работает в Firefox кстати.

Файл субтитров: 

WEBVTT


REGION
id:Frank
color:rgba(255,0,0,1)

STYLE
::cue(#1){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: blue;
}
::cue(b){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: green;
}
::cue {
  color: red;
}

1
00:00:00.500 --> 00:00:04.000
Aprendi #1 a <b>me</b> virar e <c.red.caps>você voltou</c>

2
00:00:04.100 --> 00:00:06.000 align:left size:150% region:Frank
<v.first.loud Frank>do espaço <b>sideral</b>

THIRD line
00:00:06.100 --> 00:00:10.500 align:right size:50%
e agora vejo que você está aqui no baixo astral

4
00:00:10.600 --> 00:00:14.000 align:left size:150%
eu devia me mudar e ter tomado a sua chave

5
00:00:14.100 --> 00:00:17.500 align:right size:50%
se soubesse que ia voltar para mim enfernizar

6
00:00:17.600 --> 00:00:19.500 align:left size:150%
agora vai, sai daqui

7
00:00:19.600 --> 00:00:21.500 align:right size:50%
Frank!

8
00:00:21.600 --> 00:00:24.100 align:left size:150%
ponha a cabeça para dentro

9
00:00:24.200 --> 00:00:26.500 align:right size:50%
antes que eu emprense nessa janela

10
00:00:26.600 --> 00:00:29.500 align:left size:150%
tá legal

11
00:00:29.600 --> 00:00:33.500 align:right size:50%
hhmm... hhmmm... hmmm...

12
00:00:33.600 --> 00:00:34.000 align:left size:150%
FRANK!!!

1 Ответ

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

Стилизация в файле WebVTT просто еще не стандартизирована ни в одном браузере. Надеюсь, это будет в ближайшее время.

Ссылка: Перейти к Дополнительные форматы файлов> WebVTT : https://support.google.com/youtube/answer/2734698?hl=en

Когда это произойдет, я не знаю, будет ли возможно сделать несколько блоков CSS с помощью только одного STYLE ключевого слова .

Что еще возможно:

Вы можете использовать настройки кия , которые являются достаточно модульными: 

00:00:00.000 --> 00:00:10.000 line:63% position:72% align:start
Hello world.

Вы также можете применить свои правила CSS, написав их вне файла VTT, как в теге <style>, как вы это сделали: 

<style>
video::cue {
  color: red;
}
</style>

Хотя более продвинутые селекторы, такие как ::cue(b) или ::cue(#1), вообще не доступны. Я действительно не знаю, как обойти это ограничение, если вам нужно стилизовать только определенную реплику или, например, жирную часть реплики.

...