perf(player): pre-fetch HLS manifest via IntersectionObserver

Author: Algorithm5838

static/playHLSVideo.js

@@ -43,25 +43,51 @@
                 }
             }
 
-            function initializeHls() {
-                newVideo.removeEventListener('play', initializeHls);
-                var hls = new Hls({ autoStartLoad: false });
+            function addQualitySelector(videoElement, hlsInstance, availableLevels) {
+                var qualitySelector = document.createElement('select');
+                qualitySelector.classList.add('quality-selector');
+                var defaultIndex = getIndexOfDefault(availableLevels.length);
+                availableLevels.forEach(function (level, index) {
+                    var option = document.createElement('option');
+                    option.value = index.toString();
+                    var bitrate = (level.bitrate / 1_000).toFixed(0);
+                    option.text = level.height + 'p (' + bitrate + ' kbps)';
+                    if (index === defaultIndex) {
+                        option.selected = "selected";
+                    }
+                    qualitySelector.appendChild(option);
+                });
+                qualitySelector.selectedIndex = defaultIndex;
+                qualitySelector.addEventListener('change', function () {
+                    var selectedIndex = qualitySelector.selectedIndex;
+                    hlsInstance.nextLevel = selectedIndex;
+                    hlsInstance.startLoad();
+                });
+
+                videoElement.parentNode.appendChild(qualitySelector);
+            }
+
+            // hide manifest latency from play
+            var observer = new IntersectionObserver(function (entries) {
+                if (!entries[0].isIntersecting) return;
+                observer.disconnect();
+
+                var hls = new Hls({ autoStartLoad: false }); // manifest only; segments deferred until startLoad()
                 hls.loadSource(playlist);
                 hls.attachMedia(newVideo);
-                hls.on(Hls.Events.MANIFEST_PARSED, function () {
+
+                var manifestParsed = false;
+                hls.once(Hls.Events.MANIFEST_PARSED, function () {
                     hls.loadLevel = getIndexOfDefault(hls.levels.length);
-                    var availableLevels = hls.levels.map(function(level) {
+                    var availableLevels = hls.levels.map(function (level) {
                         return {
                             height: level.height,
                             width: level.width,
                             bitrate: level.bitrate,
                         };
                     });
-
                     addQualitySelector(newVideo, hls, availableLevels);
-
-                    hls.startLoad();
-                    newVideo.play();
+                    manifestParsed = true;
                 });
 
                 hls.on(Hls.Events.ERROR, function (event, data) {
@@ -83,37 +109,27 @@
 
                     console.error("HLS error", data);
                 });
-            }
 
-            function addQualitySelector(videoElement, hlsInstance, availableLevels) {
-                var qualitySelector = document.createElement('select');
-                qualitySelector.classList.add('quality-selector');
-                var defaultIndex = getIndexOfDefault(availableLevels.length);
-                availableLevels.forEach(function (level, index) {
-                    var option = document.createElement('option');
-                    option.value = index.toString();
-                    var bitrate = (level.bitrate / 1_000).toFixed(0);
-                    option.text = level.height + 'p (' + bitrate + ' kbps)';
-                    if (index === defaultIndex) {
-                        option.selected = "selected";
+                function whenReady(fn) {
+                    if (manifestParsed) {
+                        fn();
+                    } else {
+                        hls.once(Hls.Events.MANIFEST_PARSED, fn);
                     }
-                    qualitySelector.appendChild(option);
-                });
-                qualitySelector.selectedIndex = defaultIndex;
-                qualitySelector.addEventListener('change', function () {
-                    var selectedIndex = qualitySelector.selectedIndex;
-                    hlsInstance.nextLevel = selectedIndex;
-                    hlsInstance.startLoad();
-                });
+                }
 
-                videoElement.parentNode.appendChild(qualitySelector);
-            }
+                function startPlayback() {
+                    whenReady(function () { hls.startLoad(); newVideo.play(); });
+                }
 
-            newVideo.addEventListener('play', initializeHls);
+                if (autoplay) {
+                    startPlayback();
+                } else {
+                    newVideo.addEventListener('play', startPlayback, { once: true });
+                }
+            }, { rootMargin: '200px' });
 
-            if (autoplay) {
-                newVideo.play();
-            }
+            observer.observe(newVideo);
         });
     } else {
         var videos = document.querySelectorAll("video.hls_autoplay");