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
};

@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.