有没有一种方法可以在YouTube视频滚动到视口时自动播放，并在滚动出时暂停

Question

我使用ACF灵活字段，并且在每个块中为Youtube链接添加了一个字段。当我滚动到每个块时，我希望Youtube iframe自动开始播放(所以当它到达视口时(。当我滚动出这个区块时，我希望它暂停，当它到达下一个区块时，它会播放，等等。请有人帮忙吗？

Answer 1

主要问题是YouTube不允许在没有用户交互的情况下自动播放视频。。。你可以阅读iframe api参考

我尝试了这个JavaScript函数：

function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

如果传递的元素在视口中，则此函数返回"true"，如果不在.中，则返回false

然后，我在每个addEventListener中为"滚动"one_answers"调整大小"事件调用另一个函数：

function checkScroll() {
// Get the video element
var video = document.getElementById('player');
if (isInViewport(video) == true) {
playVideo();
} else {
pauseVideo();
}
};

但正如我在开头所说，只有当用户通过交互启动播放器时，这才有效。

希望能有所帮助。