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

Question

我使用 isinViewport 从 https://github.com/zeusdeux/isInViewport 到 play/pause 个视频，当 in/out 观看时。但有时我不希望它们自动播放（对于未静音且带有控件的视频）。

因此我正在检查是否在视口中并使用属性自动播放

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 语句。如果使用 prop autoplay 什么都不做？否则如果播放，否则暂停？

感谢所有朝着正确方向提供的帮助

Answer 1

您可以在 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 对象，这可能会消耗大量性能，并且在 [=14] 的情况下也是多余的=] 可以只替换为 this.

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

If video has prop autoplay don't pause when out of viewport

jquery

video

viewport

autoplay

pause