From 87ab00cf096cc9cb954994592e6c030c497db1d6 Mon Sep 17 00:00:00 2001 From: tdro Date: Mon, 20 Nov 2023 13:37:47 -0500 Subject: static/js: Experiment with video autoplay --- static/js/autoplay.ts | 36 ++++++++++++++++++++++++++++++++++++ static/js/index.ts | 1 + 2 files changed, 37 insertions(+) create mode 100644 static/js/autoplay.ts (limited to 'static') diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts new file mode 100644 index 0000000..efa55e9 --- /dev/null +++ b/static/js/autoplay.ts @@ -0,0 +1,36 @@ +(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 <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom + && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right; + }; + + ["scroll", "DOMContentLoaded"].forEach(function (event) { + self.addEventListener(event, function () { + const videos = document.querySelectorAll("video"); + let first = true; + + 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; + + const onscreen = viewport(videos[i]); + + if (first && onscreen) { + videos[i].play(); + first = false; + } else { + videos[i].pause(); + } + } + }); + }); +})(); diff --git a/static/js/index.ts b/static/js/index.ts index af805ae..da4defa 100644 --- a/static/js/index.ts +++ b/static/js/index.ts @@ -4,6 +4,7 @@ import "./plumber.ts"; import "./instantpage.ts"; import "./contextmenu.ts"; import "./fixedsearch.ts"; +import "./autoplay.ts"; import "./timeago.ts"; console.log("Surface Control: Complete"); -- cgit v1.2.3