Автоматическое воспроизведение / приостановка видео HTML5 с помощью jQuery и in-view.js

Я использую плагин jquery inview top для автоматического воспроизведения видео при просмотре. Я пробовал много решений из stackru, но, похоже, он не работает ( решение 1, решение 2)

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.inview/0.2/jquery.inview.min.js"></script>
<script type="text/javascript">
  $('.video-autoplay').on('inview', function(event, isInView) {
    if (isInView) {
      $('video').trigger('play');
    } else {
      $('video').trigger('pause');
    }
  });
</script>

<body>
  <div id="main_container">
    <div class="navbar gallery-sub-header" style="z-index:9;">
      <div class="container">
        <div class="pull-left desc-follow">
          <div class="single-item">
            <video class=".video-autoplay" preload="auto" autoplay loop muted playsinline onclick="this.paused ? this.play() : this.pause();" poster="">
            <source src="{{ Config::get('site.uploads_dir') . '/images/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.webm' }}" type="video/webm">
            <source src="{{ Config::get('site.uploads_dir') . '/video-gif/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.mp4' }}" type="video/mp4"> Your browser does not support the video tag.
          </video>
          </div>
          <div class="single-item">
            <video class=".video-autoplay" preload="auto" autoplay loop muted playsinline onclick="this.paused ? this.play() : this.pause();" poster="">
              <source src="{{ Config::get('site.uploads_dir') . '/images/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.webm' }}" type="video/webm">
              <source src="{{ Config::get('site.uploads_dir') . '/video-gif/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.mp4' }}" type="video/mp4"> Your browser does not support the video tag.
            </video>
          </div>
          <div class="single-item">
            <video class=".video-autoplay" preload="auto" autoplay loop muted playsinline onclick="this.paused ? this.play() : this.pause();" poster="">
              <source src="{{ Config::get('site.uploads_dir') . '/images/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.webm' }}" type="video/webm">
              <source src="{{ Config::get('site.uploads_dir') . '/video-gif/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.mp4' }}" type="video/mp4"> Your browser does not support the video tag.
           </video>
          </div>
          <div class="single-item">
            <video class=".video-autoplay" preload="auto" autoplay loop muted playsinline onclick="this.paused ? this.play() : this.pause();" poster="">
              <source src="{{ Config::get('site.uploads_dir') . '/images/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.webm' }}" type="video/webm">
              <source src="{{ Config::get('site.uploads_dir') . '/video-gif/' . substr($item->pic_url, 0, strripos($item->pic_url, '.')) . '.mp4' }}" type="video/mp4"> Your browser does not support the video tag.
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
Источник

1 ответ

Решение

У вас есть две проблемы здесь. Во-первых, из-за расположения вашей логики jQuery вам нужно обернуть ее в обработчик document.ready. В настоящее время вы выполняете JS до загрузки DOM, и никаких элементов не существует.

Во-вторых, когда происходит событие, вы выбираете все video элементы. Из контекста обработчика событий я бы предположил, что вместо этого вы хотите запустить видео, которое теперь является видимым / невидимым, поэтому используйте $(this) казалось бы более применимым. Попробуй это:

$(function() {
  $('.video-autoplay').on('inview', function(event, isInView) {
    $(this).trigger(isInView ? 'play' : 'pause');
  });
});
Источник
Другие вопросы по тегам