我正在使用jQuery插件isInViewport
jQuery isInViewport来控制在一个页面上滚动进出视图时播放和暂停两个视频。
我能够让它工作的唯一方法是使用两个if语句显式检查每个视频ID。
以下作品:
$(window).scroll(function() {
if ( $("video#one").is( ':in-viewport')) {
$("video#one")[0].play();
} else {
$("video#one")[0].pause();
}
if ( $("video#two").is( ':in-viewport')) {
$("video#two")[0].play();
} else {
$("video#two")[0].pause();
}
});
然而,这是低效的。我可以在路上添加更多视频。每次更改视频时都必须调整JS是没有意义的。
这就是我想要的......但是,一旦视频1滚动到视图中,它就会触发第二个视频(在屏幕外)以开始播放。
$(window).scroll(function() {
$("video").each(function() {
if ( $("video").is( ':in-viewport')) {
$("video")[0].play();
} else {
$("video")[0].pause();
}
});
});
如何调整每个功能以在1页上播放和暂停我的视频,无论有多少?
问题很可能出在您反复提及所有视频的每个功能中。你应该能够通过使用这个来解决这个问题。
$(window).scroll(function() {
$("video").each(function() {
if ( $(this).is( ':in-viewport')) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
});
});