如果视频有道具自动播放，则在视口外时不暂停

如何解决如果视频有道具自动播放，则在视口外时不暂停

我正在使用 https://github.com/zeusdeux/isInViewport 的 isinViewport 在视野内/视野外播放/暂停视频。但有时我不希望它们自动播放（对于未静音且带有控件的视频）。

因此我正在检查是否在视口中以及是否具有属性自动播放

jQuery(document).ready(function ($) {
    "use strict";
    
    /* activate pause for lightbulb video if scrolled out of viewport */
    $(window).scroll(function() {
        $('video').each(function(){
            if ($(this).is(":in-viewport()") && $(this).prop('autoplay')) {
                $(this)[0].play();
            } else {
                $(this)[0].pause();
            }
        });
    });
});

现在。这很好用。但是，一旦您滚动一点，我设置为自动播放的视频就会停止，这不是可取的行为。有没有办法说：否则，并且使用道具自动播放，什么都不做？

也许我需要两个不同的 if 语句。如果使用道具自动播放什么都不做？否则如果播放，然后暂停？

感谢所有在正确方向上的帮助

解决方法

当页面从滚动更新逻辑加载时，您可以在 video 选择器中包含一个属性选择器以排除设置了 autoplay 的视频。

jQuery($ => {
  "use strict";
  let $videos = $('video:not([autoplay])');

  /* activate pause for lightbulb video if scrolled out of viewport */
  $(window).on('scroll',() => {
    $videos.each(function() {
      $(this).is(":in-viewport()") ? this.play() : this.pause();
    });
  });
});

请注意，我稍微修改了逻辑，以避免在 scroll 事件处理程序中创建 jQuery 对象，这可能会大量消耗性能，并且在 $(this)[0] 可以替换为只需this。