gpt4 book ai didi

javascript - jQuery 在视口(viewport)中未检测到多个视频

转载 作者:行者123 更新时间:2023-12-03 00:05:08 26 4
gpt4 key购买 nike

我正在使用 jQuery 插件 isInViewport jQuery isInViewport控制单个页面上两个视频滚动进入和退出 View 后的播放和暂停。

我能够让它工作的唯一方法是使用两个 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 滚动到 View 中,它就会触发第二个视频(位于屏幕外)也开始播放。

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

如何调整每个功能以在一页上播放和暂停我的视频,无论有多少个视频?

最佳答案

问题很可能出现在您一次又一次引用所有视频的每个函数中。您应该能够通过使用 THIS 来解决此问题。

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

关于javascript - jQuery 在视口(viewport)中未检测到多个视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54992177/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com