Я пытаюсь добавить некоторые базовые стили к ::cue из WebVTT в элементе <video>.Конкретная проблема заключается в line-height, точнее в межстрочном интервале, который, кажется, масштабируется в зависимости от размера элемента <video>.
Только для ::cue псевдоэлемента допускаетсянебольшое подмножество свойств CSS , из которых line-height является одним из них.Используя это, я могу определить font-size и line-height, но line-height, похоже, игнорируется.
Вот некоторые основные CSS:
video::cue {
font-size: 14px !important;
line-height: 20px !important; // or calc(1em + 6px)
background-color: rgba(0,0,0,0.6) !important;
}
font-size и *Стили 1020 * работают должным образом.Хотя, когда область просмотра уменьшается, font-size начинает уменьшаться, чтобы поместиться в элемент <video>.
line-height в основном игнорируется, с несколькими строками, разнесенными в соответствии с размером элемента видео.Вот несколько скриншотов, показывающих элемент <video> различных размеров.
Я попытался стилизовать ::cue с помощью CSS в документе и как стиль ::cue в файле .vtt.
При небольших размерах линии начинают перекрываться, а при больших размерах линии разносятся далеко друг от друга.
Есть ли способ согласованного оформления элементов ::cue, чтобы межстрочный интервал оставался постоянным, как<video> элемент масштабируется вверх / вниз?То есть межстрочный интервал будет постоянным X пикселей?
Примечание. Это нужно только для работы в Chrome.