1

我使用 jquery inview 插件顶部在查看时自动播放视频。我尝试了许多来自 stackoverflow 的解决方案，但它似乎不起作用（解决方案 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>
4

1 回答 1

0

你这里有两个问题。首先，由于 jQuery 逻辑的位置，您需要将其包装在 document.ready 处理程序中。目前，您在加载 DOM 之前执行 JS，并且不存在任何元素。

其次，当事件触发时，您选择所有video元素。从事件处理程序的上下文中，我假设您想要启动现在可见/不可见的视频，因此使用$(this)似乎更适用。尝试这个：

$(function() {
  $('.video-autoplay').on('inview', function(event, isInView) {
    $(this).trigger(isInView ? 'play' : 'pause');
  });
});
于 2019-06-21T09:48:19.690 回答