Отображение элементов управления видео только при воспроизведении, а не при загрузке

Question

У меня есть вопрос о встраивании видео с кликабельным миниатюрой. Я собирался изменить тег видео, чтобы отобразить изображение постера, воспроизводимое по клику:

<video width="569" height="569" controls="controls" poster="images/thumbnail.png" onclick="this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>

Однако панель управления видео появляется наложенной на изображение плаката при загрузке. Можно ли изменить этот код так, чтобы панель управления появлялась только после начала воспроизведения видео? Я мог бы опустить контрольный тег all togeter, но тогда он вообще не появился бы.

Дайте мне знать, если у кого-нибудь есть какие-либо идеи или я могу попробовать альтернативный подход.

Спасибо!

Answer 1

Просто исключите controls атрибут, а затем используйте событие onclick, чтобы установить его значение true. Если вы хотите удалить их позже, установите для атрибута значение false

<video width="569" height="569" poster="images/thumbnail.png" onclick="this.controls=true;this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>