自动 play/pause HTML5 视频与 jQuery 和 in-view.js

Question

我用的是jquery inview 插件 top 在查看时自动播放视频。我已经尝试了很多来自 Whosebug 的解决方案，但它似乎不起作用 (, )

<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>

Answer 1

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

其次，当事件触发你时 select 所有 video 元素。从事件处理程序的上下文来看，我假设您想要启动现在为 visible/invisible 的视频，因此使用 $(this) 似乎更适用。试试这个：

$(function() {
  $('.video-autoplay').on('inview', function(event, isInView) {
    $(this).trigger(isInView ? 'play' : 'pause');
  });
});

自动 play/pause HTML5 视频与 jQuery 和 in-view.js

Auto play/pause HTML5 video with jQuery and in-view.js

javascript

jquery

html5-video

inview