https://localo.com/assets/js/hls-video.js

1const videos = document.querySelectorAll('.hls-video');
2
3videos.forEach(video => {
4    const src = video.dataset.src;
5
6    if (Hls.isSupported()) {
7        const hls = new Hls();
8        hls.loadSource(src);
9        hls.attachMedia(video);
10    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
11        video.src = src;
12    }
13});
14
15const observer = new IntersectionObserver((entries) => {
16    entries.forEach(entry => {
17        const video = entry.target;
18        if (entry.isIntersecting) {
19            var playPromise = video.play();
20            if (playPromise !== undefined) {
21                playPromise.catch(function() {});
22            }
23        } else {
24            video.pause();
25        }
26    });
27}, { threshold: 0.5 });
28
29videos.forEach(video => observer.observe(video));