我跟随this guide检测我的视频元素何时进入视口然后执行" x",但不断获取标题错误。不确定是因为我使用wordpress与gulp和piling.js
我的页面使用打桩,我有一个视频部分,当我滚动到那个"堆栈",我希望视频开始播放但它开始播放页面加载。
// inside document.ready()
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})
未捕获错误:语法错误,无法识别的表达式:unsupported pseudo:in-viewport
<div id='<ID-CHANGES-INSIDE-LOOP>' class='image-block'>
<video autoplay>
<source class='video' src='movie.mp4' type='video/mp4'>
</video>
</div>
使用Piling是否难以使用?
答案 0 :(得分:2)
伪选择器需要它的插件才能工作(它不是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/)。
答案 1 :(得分:0)
伪属性:in-viewport
需要通过插件附加(我再也找不到了) -
可以尝试尝试OnScreen基本可见性检测;它做的大致相同。
答案 2 :(得分:0)
您应该使用pagePiling.js callbacks或州级。