HLS.js Custom Error Handler to load Main Manifest from unstable HLS Live Stream

To handle manifest load errors in HLS.js with retries, you can set up a custom error handler. This will allow you to retry loading the manifest a specified number of times when encountering manifestLoadError. Below is a sample code that demonstrates how to implement this logic:

// Include the HLS.js script in your HTML file
// <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

// JavaScript code to handle manifest load errors with retries
document.addEventListener("DOMContentLoaded", function() {
    if (Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        var maxRetries = 3; // Maximum number of retries
        var retryCount = 0; // Current retry count
        var retryDelay = 2000; // Delay between retries in milliseconds

        hls.loadSource('https://path/to/your/manifest.m3u8');
        hls.attachMedia(video);

        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
        });

        hls.on(Hls.Events.ERROR, function(event, data) {
            if (data.type === Hls.ErrorTypes.NETWORK_ERROR && data.details === Hls.ErrorDetails.MANIFEST_LOAD_ERROR) {
                if (retryCount < maxRetries) {
                    retryCount++;
                    console.log(`Retry ${retryCount}/${maxRetries}`);
                    setTimeout(function() {
                        hls.loadSource('https://path/to/your/manifest.m3u8');
                    }, retryDelay);
                } else {
                    console.error('Maximum retries reached. Could not load the manifest.');
                    // Handle the error appropriately here
                }
            } else {
                console.error('HLS.js error:', data);
                // Handle other errors appropriately here
            }
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // HLS.js is not supported on this platform, but the native HLS is
        video.src = 'https://path/to/your/manifest.m3u8';
        video.addEventListener('loadedmetadata', function() {
            video.play();
        });
    }
});

Explanation:

1. Initialization and Setup:
   • The script waits for the DOM to load before executing the HLS.js setup.
   • It checks if HLS.js is supported by the browser.
   • It defines variables for the maximum number of retries (maxRetries), the current retry count (retryCount), and the delay between retries (retryDelay).
2. Loading the Manifest:
   • The hls.loadSource method is used to load the HLS manifest.
   • The hls.attachMedia method is used to attach the video element to HLS.js.
3. Error Handling and Retrying:
   • The script listens for the Hls.Events.ERROR event.
   • If the error type is NETWORK_ERROR and the detail is MANIFEST_LOAD_ERROR, it increments the retry count and attempts to reload the manifest after a specified delay.
   • If the maximum number of retries is reached, an error message is logged, and further actions can be taken.
4. Fallback for Native HLS Support:
   • If HLS.js is not supported but the browser supports native HLS, it sets the video source directly to the manifest URL.

This code provides a basic structure for handling manifest load errors with retries in HLS.js. You can further customize the error handling and retry logic as per your requirements.