creates an Intersection Observer.

createObserver.js

/** @return IntersectionObserver */
function createObserver(p_threshold) {
  return new IntersectionObserver(
    (entries) => {
      entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
        if (entry.isIntersecting) {
          const eventIntersecting = new CustomEvent("intersecting");
          entry.target.dispatchEvent(eventIntersecting);
          return;
        }
        const eventNotIntersecting = new CustomEvent("not-intersecting");
        entry.target.dispatchEvent(eventNotIntersecting);
      });
    },
    {
      threshold: p_threshold,
    }
  );
}

export {
  createObserver
};

Hi @anova can you help me ? . https://tiktok-zee.vercel.app This work well in Brave Browser . But in Chrome , I need to click one time and scroll . Why this is happening . I use next js intersection in useEffect . Also my videos have audio . https://github.com/thanhtutzaw/tiktok

Hello @thanhtutzaw , JS console says: "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22" You call play() and pause() methods on same element, pause() interrupts the play. It seems the pause() callen on every video. There must be a condition. If element intersects, play() must be called. If element stopped being intersected, pause() must be called.

but This console warning is gone. I am not sure . But It autoplaying without audio in Chrome . I think in my Chrome Browser my url have good engagement to auto play .
chrome://media-engagement/

if my url is high It can auto play But I think It is only in Desktop

https://developer.chrome.com/blog/autoplay/#media-engagement-index

@thanhtutzaw I am sorry. I don't know about media engagement, but I will read about it.

I wrote this code from Ben Frain's blog post. I noticed this observer being re-used not only videos, also connect the sliders autoplay/pause is useful. I de-coupled the createObserver, and use with custom events.

Our agency's portfolio detail pages are using this createObserver code.
(Note for future: This links may be expire someday, if I notice, I will remove the links which became obsolete)

https://www.kreatif.net/markalarimiz/portakal-bahcem/

This is the createObserver: https://www.kreatif.net/wp-content/themes/kreatif_wp_theme/js/create-observer.js
And this is where its used: https://www.kreatif.net/wp-content/themes/kreatif_wp_theme/js/kr-videos.js

Note to myself: if "muted" attribute is absent, autoplay blocked.