[Webkit-unassigned] [Bug 255024] Playing Video with Intersection Observer results in "Unhandled Promise Rejection: AbortError: The operation was aborted."

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=255024

--- Comment #7 from Marcos Caceres <marcosc at apple.com> ---
(In reply to Marcos Caceres from comment #6)
> (In reply to Ben Frain from comment #5)
> > Hi Marcos, thanks for taking a look. Your second comment mostly works but
> > does not play the video(s) that is in view when the page is first loaded.
> > 
> > Here it is an example:
> > https://benfrain.com/playground/video-stop-start/indexAlt.html
> 
> Apologies, Ben. I was only checking if the AbortError was related to user
> activation and didn’t provide a complete solution. It should be possible to
> modify the code a bit to play the videos that are intersecting. 
> 
> Can you give that a go? Otherwise I’ll try to provide you with an updated
> solution tomorrow. If we can get it working I think we can close this issue
> ��

Couldn't help myself... I think this works:

```JS
function videoObsever(video) {
  return async (entries, observer) => {
    for (entry of entries) {
      if (!entry.isIntersecting) {
        video.pause();
        console.log("paused", video);
        continue;
      }
      // Guard against playing too early
      if (video.readyState < video.HAVE_CURRENT_DATA) {
        console.warn("video not ready yet", video);
        await new Promise((r) => {
          video.addEventListener("canplay", r, { once: true });
        });
        console.log("video ready", video);
      }
      await video.play();
      console.log("playing", video);
    }
  };
}
document.querySelectorAll("video").forEach((video) => {
  video.pause();
  new IntersectionObserver(videoObsever(video), {
    threshold: 0.2,
  }).observe(video);
});
```

In any case... Ben, is it ok if we close this issue? I think we've shown that Webkit is working as expected, right?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230411/f8fc5c55/attachment-0001.htm>