diff options
Diffstat (limited to 'static/js/autoplay.ts')
-rw-r--r-- | static/js/autoplay.ts | 42 |
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(); + } + } + }); + }); +})(); |