Кнопка cc видео HTML 5
HTML
<video [src]='videoURL' controls #videoPlayer (ended) = "onVideoEnd($event)"
[style.maxHeight] = "screen.data.height">
<track label = "English subtitles" kind = "subtitles" srclang = "en"
[src] = "screen.data.ccs"/>
</video>
CSS
video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Может ли кто-нибудь пролить свет на то, почему кнопка Captions and Download расположена там, где она находится на скриншоте выше, она была расположена правильно, поэтому мне интересно, было ли обновление Google Chrome, которое вызвало что-то, или я просто схожу с ума ха-ха.
Я до сих пор изучал элементы shadow-doom, но безуспешно пытался вернуть кнопки в исходное положение.
Мне также интересно, были ли у других подобная проблема, и если были найдены обходные пути / решения, мне для целей моего проекта не разрешено создавать какие-либо пользовательские элементы управления для видеоплеера, поэтому, если это было возможным решением, это из :(
Любая помощь будет принята с благодарностью, заранее всем спасибо. :)
Браузер хром.
Ответы 1
Итак, я нашел решение для всех, кто прочитает этот пост в будущем и столкнется с подобной проблемой:
Проблема: Видео и родительский div позиционировались с помощью transform: translate(-50%, -50%);
Это по какой-то причине не повлияло на псевдоэлементы видео, в частности на меню дополнительных функций
Решение: удалите указанную выше строку кода из родительского div и замените на
position: absolute;
top: 50%;
left: 50%;
и расположите видео аналогичным образом вместо использования преобразования translate