HLS.js code to reload video when levelLoadTimeOut occurs

When the HLS.js player face errors like levelLoadTimeOut, the player stops. This is very helpful to investigate the root cause, but it's not comfortable in terms of user's point of view. What user want to have is comfortable and seamless playback environment.

What we can try will be automatical reloading.

If you can continue to play from the current playback position, that will be a plus!

To handle the levelLoadTimeout event in HLS.js and reload the video when this timeout occurs, you can use the following approach. Here's a sample code snippet to achieve this:

// Initialize HLS.js
if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();

    // Attach media
    hls.attachMedia(video);

    // Load the video source
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        var videoUrl = 'https://path/to/your/video.m3u8'; // Replace with your video URL
        hls.loadSource(videoUrl);
    });

    // Handle level load timeout
    hls.on(Hls.Events.LEVEL_LOAD_TIMEOUT, function (event, data) {
        console.error('Level load timeout occurred:', data);

        // Optionally, you can try to reload the level or the entire video
        // Example: Reloading the entire video source
        var currentLevel = hls.currentLevel;
        console.log('Reloading level:', currentLevel);

        // Reload the level or fallback to reload the entire source
        hls.loadLevel = currentLevel; // Reload the same level
        hls.loadSource(hls.url); // Reload the entire video source
        hls.startLoad(); // Restart loading
    });

    // Attach error handling for other HLS errors
    hls.on(Hls.Events.ERROR, function (event, data) {
        if (data.fatal) {
            switch (data.type) {
                case Hls.ErrorTypes.NETWORK_ERROR:
                    console.error('Fatal network error encountered, trying to recover...');
                    hls.startLoad(); // Try to recover by restarting load
                    break;
                case Hls.ErrorTypes.MEDIA_ERROR:
                    console.error('Fatal media error encountered, trying to recover...');
                    hls.recoverMediaError();
                    break;
                default:
                    // If it's not recoverable, destroy the instance
                    hls.destroy();
                    break;
            }
        }
    });

    // Attach the video to the DOM
    video.play();
}

Explanation:

• Hls.isSupported(): Ensures that the browser supports HLS.js.
• hls.attachMedia(video): Attaches the HLS.js instance to the video element.
• Hls.Events.LEVEL_LOAD_TIMEOUT: This event is triggered when a level fails to load within the defined timeout period.
• hls.loadLevel = currentLevel: Attempts to reload the current level.
• hls.loadSource(hls.url): Reloads the entire video source if needed.
• hls.startLoad(): Starts loading the media after reloading the source or level.
• Error Handling: The Hls.Events.ERROR listener handles different error types and tries to recover or reload the video accordingly.

This code ensures that the video will reload if a level load timeout occurs, providing a fallback mechanism to enhance the user's viewing experience.

To play continuous playback when the player face the error like above, you may able to have

HTML video object provides the current position like below:

// Function to reload the player and resume from the saved position
function reloadPlayer() {
	savedPlayPosition = video.currentTime;

    // Destroy the current HLS instance
    hls.destroy();

    // Create a new HLS instance
    hls = new Hls();
    hls.loadSource('https://example.com/path/to/your/playlist.m3u8');
    hls.attachMedia(video);

    // Resume playback from the saved position once the video is ready
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.currentTime = savedPlayPosition;
        video.play(); // Automatically play the video after setting the position
    });
}