如何根据 jQuery 的可见性播放/暂停视频

Posted 2023-05-09

【中文标题】如何根据 jQuery 的可见性播放/暂停视频

【英文标题】：How to play/pause video depending on visibility with jQuery

【发布时间】：2020-09-06 19:32:13

【问题描述】：

我希望播放/暂停一个或多个视频，具体取决于它们是否在视口中。

我知道这可以通过 jQuery（和插件）来实现，所以我尝试使用 isInViewport 插件以及以下代码，但收到如下所示的错误。

html

<script src="scripts/jquery.js"></script>
<script src="scripts/isInViewport.js"></script>
[...]
<video id="video1" src="file.mp4" ></video>
[...]
<script src="scripts/script.js"></script>

JS

var $video = document.getElementsByTagName("video1");

if ($video.is(":in-viewport")) 
  $video.play();
 else 
  $video.pause();
;

控制台

TypeError: $video.is is not a function

【问题讨论】：

您可以使用Intersection Observer API - 这可以让您在事物进入/离开视口时进行监听

很高兴看到一个如何在我不熟悉的特定用例中使用 Intersection Observer API 的示例。

【参考方案1】：

试试

$('video').each(function() 
  if ($(this).is(":in-viewport")) 
    $(this)[0].play();
   else 
    $(this)[0].pause();
  

);

【讨论】：

我试过了，但视频只在页面加载时播放；并且在滚动离开时没有暂停（或在滚动回到视图时从暂停播放）。