diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/js/autoplay.ts | 36 | ||||
-rw-r--r-- | static/js/index.ts | 1 |
2 files changed, 37 insertions, 0 deletions
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"); |