Как скрыть controls под poster?

Question

[narkesss]

Тег Video
Как скрыть контролс под постером ? Знает кто ?
Или только вариант вместо постера заглушку делать ?

Answer 1

[Сергей Левченко]

Сначала ставим тег video без атрибута controls

<video class="video" poster="poster.jpg" preload>
  <source src="video.mp4">
</video>

по клику на видео запускаем проигрывание и устанавливаем controls = true
на чистом js, без jQuery

document.addEventListener("DOMContentLoaded", function(){ // аля $(document).ready
  let videos = document.getElementsByClassName('video'); // получаем все видосы с класосм
  videos = [].slice.call(videos); // преобразуем в массив
  videos.forEach(function(item) { // перебираем массив и навешиваем обработчики
    let media = item;
    media.onclick = function () {
      media.play(); // запускаем проигрывание
      media.controls = true; // добавляем контролы
    };
    media.addEventListener('ended', function() {
      media.controls = false; // видео просмотрено, убираем контролы
    });
  });
});

https://yandex.ru/search/?text=html5%20media%20api...

Comments

[narkesss]

Спасибо ,вам добрый человек))Очень помогли

Answer 2

[Евгений Сидаш]

Попрежнему код рабочий))