Стиль WebVTT не применяется в простом примере
Я пытался заставить субтитры .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!!!
Ответы 2
Стилизация в файле WebVTT просто еще не стандартизирована ни в одном браузере. Надеюсь, это будет когда-нибудь в ближайшее время.
Ссылка: Перейти к Расширенные форматы файлов > WebVTT: https://support.google.com/youtube/answer/2734698?hl=ru
Когда это произойдет, я не знаю, можно ли будет делать несколько блоков 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), вообще недоступны. Я действительно не знаю, как обойти это ограничение, если вам нужно стилизовать только определенную реплику или, например, выделенную жирным шрифтом часть реплики.
Я протестировал ваш файл vtt в Linux прямо сейчас. Общий результат: цветовые стили не действуют, полужирные теги создают текст с большим весом шрифта. Второй подзаголовок = "do espaço sideral", обозначенный здесь как T,
Chrome/57.0 Результат: текст расположен, буква T смещена влево, размер шрифта нормальный.
Firefox/70.0 Результат: текст позиционирован, написан мелким шрифтом, слева
Epiphany/3.14.1: текст расположен точно. Т справа, нормальный размер.
При написании нового приложения я обнаружил то же, что написал JacopoStanchi: правила "::cue" в таблице стилей могут управлять цветами и другими вещами, см. настройки ::cue в МДН.