Нажмите на изображение плаката, которое воспроизводит видео HTML5?

Question

У меня есть видео HTML5 с атрибутом постера.Я хотел бы как-то настроить его так, чтобы вы могли щелкнуть в любом месте элемента видео (область изображения плаката), и он запустит событие воспроизведения и запустит видео?Я чувствую, что это довольно стандартная практика, но я не могу найти способ сделать это без вспышки.Любая помощь будет высоко ценится.

Answer 1

Это работает для меня, Эндрю.

В свою HTML-голову добавьте этот маленький кусочек js:

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

Или просто добавьте атрибут onlick непосредственно в ваш HTML-элемент:

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>

Answer 2

Написал это здесь тоже, но это относится и к этой теме.

У меня было бесчисленное множество проблем, но я наконец-то нашел решение, которое работает.

В основномкод ниже добавляет обработчик кликов к видео, но игнорирует все клики в нижней части (0,82 произвольно, но, похоже, работает для всех размеров).

$("video").click(function(e){

    // handle click if not Firefox (Firefox supports this feature natively)
    if (typeof InstallTrigger === 'undefined') {

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if (clickY > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();
    }
});

Answer 3

Использование атрибута poster не влияет на поведение.Это просто показывает это изображение при загрузке видео.Когда видео запускается автоматически (если реализация браузера этого не делает), вам нужно сделать что-то вроде:

<video id="video" ...></video>

в javascript с использованием jquery:

$('#video').click(function(){
   document.getElementById('video').play();
});

Надеюсь, это поможет

Answer 4

Да, это звучит как обычная функция, которую создатели браузера или составители HTML-спецификаций просто "забыли".

Я написал пару решений, но ни одно из них не является действительно кросс-браузерным или на 100% надежным.В том числе проблемы с нажатием на элементы управления видео имеет непреднамеренное последствие остановки видео.Вместо этого я бы рекомендовал вам использовать проверенное решение, такое как VideoJS: http://videojs.com/

Answer 5

Я делал это в реакции и es6. Вот современная версия, которую я сделал после прочтения решения Даниэля Голдена:

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}

Answer 6

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

Answer 7

Использование get (0) также работает

    var play = $('.playbutton');
    var video = $('#video');
    play.click(function(){
        video.get(0).play();
    })