使用jQuery和in-view.js自動播放/暫停HTML5視頻

Question

我使用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>

Answer 1

您在這里有兩個問題。 首先，由於jQuery邏輯的位置，您需要將其包裝在document.ready處理程序中。 當前，您是在加載DOM之前執行JS，並且不存在任何元素。

其次，當事件觸發時，請選擇所有video元素。 從事件處理程序的上下文中，我假設您想開始播放現在可見/不可見的視頻，因此使用$(this)似乎更適用。 嘗試這個：

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

使用jQuery和in-view.js自動播放/暫停HTML5視頻

問題描述

1 個解決方案

解決方案1
0 已采納 2019-06-21 09:48:19

使用jQuery和in-view.js自動播放/暫停HTML5視頻

問題描述

1 個解決方案

解決方案1 0 已采納 2019-06-21 09:48:19

解決方案1
0 已采納 2019-06-21 09:48:19