https://www.metabase.com/js/video-autoplay.js

1const observer = new IntersectionObserver(function(entries) {
2  const $video = entries[0].target;
3  const videoPlayer = window.videojs.getPlayer($video.id);
4
5  // play
6  if (entries[0].isIntersecting === true) {
7    // rewind
8    try {
9      videoPlayer.currentTime(0);
10    } catch (err) {
11      console.warn("Cannot rewind video");
12    }
13
14    // play
15    videoPlayer
16      .play()
17      .then(() => {
18        // Nothing atm
19      })
20      .catch(() => {
21        console.warn("Video cannot start:", $video.id);
22      });
23  }
24  // pause
25  else {
26    try {
27      videoPlayer.pause();
28    } catch (err) {
29      console.warn("Cannot pause video");
30    }
31  }
32});
33
34if (!iOS()) {
35  if (typeof window.videojs === "function") {
36    document.querySelectorAll(".pause-observer").forEach(($video) => {
37      if ($video.id) {
38        window.videojs(
39          $video,
40          {
41            autoplay: false,
42            controls: false,
43            id: $video.id,
44            loop: true,
45            muted: true,
46            preload: "auto",
47          },
48          () => {
49            observer.observe(document.querySelector(`#${$video.id}`));
50          },
51        );
52      } else {
53        console.error("Video tag is missing a unique id");
54        console.error($video);
55      }
56    });
57  } else {
58    console.warn(
59      "videojs is not loaded; pause-observer videos will use native playback.",
60    );
61  }
62}
63
64function iOS() {
65  return (
66    [
67      "iPad Simulator",
68      "iPhone Simulator",
69      "iPod Simulator",
70      "iPad",
71      "iPhone",
72      "iPod",
73    ].includes(navigator.platform) ||
74    // iPad on iOS 13 detection
75    (navigator.userAgent.includes("Mac") && "ontouchend" in document)
76  );
77}