HTML5 Видео: Как покрыть контроллеры постером

Question

Я использую HTML5 для загрузки видео с сервера. Для UX требуется изображение обложки, которое охватывает весь видеоплеер HTML5, включая контроллер. Проблема в том, что когда я использую атрибут poster для загрузки изображения обложки, он не покрывает контроллер. Вроде их z-индекс выше, чем у постера. См. Изображение ниже:

Как сделать так, чтобы изображение плаката также покрывало контроллеры?

Answer 1

Вот одно простое решение.

1) Удалить атрибут controls из видеоэлемента

2) Показывать элементы управления при нажатии видео, например onclick = "this.controls = true" или в прослушивателе событий, например

var video = document.getElementById('video');
video.addEventListener('click', function(){
    video.controls = true;
}, false);

3) Если вы не хотите показывать элементы управления, когда видео еще не загружено, вы можете проверить его readyState https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState