IntersectionObserver未在iOS上注册，但可以在Android上运行

Question

我有什么

我在我的提要页面上使用了IntersectionObserver。它的行为就像TikTok。向上或向下滚动以查看下一个视频。一进入，视频就开始播放。退出时，停止播放

<标题>

它可以在Android和Windows上完美地工作。在iOS平台上，情况就不一样了。视频没有像预期的那样自动播放。有点奇怪的是，如果我点击视频(调用视频上的play())，然后滚动到视图外，视频停止。当我滚动回视图时，它又会自动播放。所以我知道IntersectionObserver被识别了，只是最初没有被触发。

<标题>

==================================

Feed Page

data() {
return {
observer: null,
}
};
mounted() {
let config = { threshold: 0.1 };
if (process.client) {
if (/iPhone|iPad/i.test(navigator.userAgent)) {
config.root = null;
}
}
this.observer = new IntersectionObserver(function (entries) {
entries.forEach(({ target, isIntersecting }) => {
if (isIntersecting) {
target.play();
} else {
target.pause();
target.currentTime = 0;
}
});
}, config);
beforeDestroy() {
this.observer.disconnect();
},

HTML

<div
v-for="(post, index) in posts"
:key="index"
>
<MobileFeedItem :post="post" :observer="observer" />
</div>

=================================

MobileFeedItem组件

props: ["post", "observer"],
mounted() {
this.$nextTick(() => {
if (this.observer !== null && this.checkMediaTypeIsVideo(this.post)) {
this.observer.observe(
document.getElementById(
`video_${this.getContentId(this.post)}_mobile`
)
);
}
});

HTML

<video
:id="`video_${getContentId(post)}_mobile`"
:data-poster="getThumbnail(post)"
preload="none"
disablePictureInPicture
crossorigin
loop
playsinline
v-lazy-load
class="w-full h-full my-4"
>
<source :data-src="getMedia(post)" type="video/mp4" />
</video>

<标题>

我的想法…观察者正在被实例化和识别，只是没有被触发。那么，是否有一种方法可以让我强制浏览器唤醒并意识到观察者，而不必首先点击每个视频元素?

Answer 1

我找到了答案。这不是IntersectionObserver有什么问题，而是因为我的视频没有静音。

"By default, autoplay executes only if the video doesn’t contain an audio track, or if the video element includes the muted attribute. Video playback pauses if the element gains an audio track, becomes unmuted without user interaction, or if the video is no longer onscreen"

来源- https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari

对于Safari，我们似乎根本不需要交集观察者，因为它已经为我们做了。嗯。