1 files changed, 42 insertions, 0 deletions
diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts
new file mode 100644
index 0000000..5987576
--- /dev/null
+++ b/static/js/autoplay.ts
@@ -0,0 +1,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();
+        }
+      }
+    });
+  });
+})();