static/js/autoplay.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

(function () {
  function viewport(element) {
      const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
          offset: { top: -50, left: 0, bottom: -50, right: 0 }
      };
      const view = element.getBoundingClientRect();
      return view.top    >= -options.offset.top
          && view.left   >= -options.offset.left
          && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset.bottom
          && view.right  <= (self.innerWidth  || document.documentElement.clientWidth)  + options.offset.right;
  };

  ["scroll", "DOMContentLoaded"].forEach(function (event) {
    self.addEventListener(event, function () {
      let first = true;
      let videos = document.querySelectorAll("video");

      for (i = 0; i < videos.length; i++) {
        videos[i].autoplay    = true;
        videos[i].controls    = true;
        videos[i].loop        = true;
        videos[i].muted       = true;
        videos[i].playsinline = true;

        videos[i].setAttribute("autoplay",    true);
        videos[i].setAttribute("controls",    true);
        videos[i].setAttribute("loop",        true);
        videos[i].setAttribute("muted",       true);
        videos[i].setAttribute("playsinline", true);

        const onscreen = viewport(videos[i]);

        if (first && onscreen) {
          videos[i].play();
          first = false;
        } else {
          videos[i].pause();
        }
      }
    });
  });
})();