0

我正在按照本指南检测我的视频元素何时进入视口，然后执行“x”，但不断收到标题错误。不知道是不是因为我使用带有 gulp 和piling.js的 wordpress

我的页面使用 Piling 并且我有一个视频部分，当我滚动到该“堆栈”时，我希望视频开始播放，但它在页面加载时开始播放。

// inside document.ready()

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

未捕获的错误：语法错误，无法识别的表达式：不支持的伪：in-viewport

<div id='<ID-CHANGES-INSIDE-LOOP>' class='image-block'>
  <video autoplay>
    <source class='video' src='movie.mp4' type='video/mp4'>
  </video>
</div>

使用打桩会使这难以工作吗？

4

3 回答 3

4

该伪选择器需要其插件才能工作（它不是 jQuery 选择器的一部分），但现在您可以使用.getBoundingClientRect(). 这是我使用的方法：

/**
 * Check if an element is in the visible viewport
 * @param {jQuery|HTMLElement} el
 * @return boolean
 */
var IsInViewport = function(el) {
    if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

// example
if( IsInViewport($('#myvideo')) ) { /* do stuff.. */ }

此外，根据您的需要，您可以使用:visible选择器（https://api.jquery.com/visible-selector/）。

于 2017-07-05T10:15:29.423 回答
0

伪属性:in-viewport需要通过插件附加（我再也找不到了） -

也许尝试尝试使用OnScreen Basic Visibility Detection 代替；它也差不多。

于 2017-07-05T10:08:01.170 回答
0

您应该使用pagePiling.js 回调或状态类。

于 2017-07-05T11:31:52.347 回答