Нужно сделать свою кнопку play у тега video?

Question

[AnnaShant]

Нужно сделать свою кнопку play. Видео вставленно с помощью тега video. При загрузке страницы должен отображаться кадр из видео со своей кнопкой play, при нажатии на которою видео воспроизводится. При нажатии на видео оно останавливается и снова появляется статичный кадр с кнопкой.

Comments

[Сергей delphinpro]

Отдельно кнопка не кастомизируется. Элементы управления вообще не кастомизируются.
Исходя из этого видится одно решение — плеер делать без controls, а контролы верстать отдельно, и оживлять через video api
Т.е. по сути написать собственный плеер — обертку над video.

[Ragtime Kitty]

e.g. Как вставить видео в страницу на чтобы проигрыватель был с одной кнопкой «Play», без статус-бара?

Answer 1

[Антон Усачев]

По сути все просто. Нужно только обратиться к API html5 video, и можно творить все что угодно.

Comments

[awpnewbie]

Зарегистрировался, чтобы сказать спасибо. Сэкономили несколько часов времени.

Answer 2

[bqio]

Делайте обёртку и с помощью z-index и position: absolute подгоняйте.

По типу:

<div class="video_wrapper">
   <div class="video_static_image"></div>
   <div class="video_play_button"></div>
   <video class="video_source"></video>
</div>