使用 jQuery 和 in-view.js 自动播放/暂停 HTML5 视频答案

【问题标题】：Auto play/pause HTML5 video with jQuery and in-view.js使用 jQuery 和 in-view.js 自动播放/暂停 HTML5 视频
【发布时间】：2019-06-21 09:38:16
【问题描述】：

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

【问题讨论】：

也可能值得通过验证器运行您的 HTML。第 1 行和第 9 行的结束脚本标签需要注意。这可能会导致问题...

标签： javascript jquery html5-video inview

【解决方案1】：

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

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

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

【讨论】：

谢谢@Rory。我用我的脚本替换了你的脚本，但它不起作用:(
糟糕！它确实有效。即使视频未完全显示，视频仍在播放。