All candidate resources failed to load. Media load paused

I wrote a script to display mp4 clips FTP'd to the web server from a Reolink CCTV recorder. There could be hundreds sometimes over thousand of these clips along with their jpeg pictures displayed by date and time.

By default I use preload="none" not to overwhelm the browser on page load. I click some of those videos to determine if I should keep or delete. However, after about 20-40 video loads I get this error in FireFox console All candidate resources failed to load. Media load paused.

After this error the browser will not play anymore videos until it is refreshed/reloaded. Sometimes ajax delete function will also stop working. When I refresh the page all of the selections to delete will go away rendering my time reviewing the videos useless.

<video width="320" height="240" controls preload="none">
   <source src="/path/to/video.mp4" type="video/mp4" onerror="playerError()">
</video>

After adding onerror="playerError()" extended the number of videos I can play before the browser stops working. This function gets triggered few times before the browser stops working.

function playerError() {
    console.log('playerError function triggered'); 
} 

Is there any jquery/javascript code that can be added to this function to make the browser continue to work? Basically is there a way to reset Media load paused situation?

UPDATE: This is a network screenshot of a video viewed successfully. All of that is just one video, that's downloading in so many fragments. I am sharing this to show that some fragments says blocked. Is this normal?

The problem: All candidate resources failed to load. Media load paused error actually occurs when I click on a MP4 video file that is corrupt. However the browser's network connectivity (including ajax requests) goes unresponsive after some usage of the UI to view videos. I initially thought the browser goes unresponsive only due to the above error, but I feel it is just one of other reasons.

The solution: Refresh/reload the browser. BUT, if there are lots of videos selected for deletion, all of that work is lost when the browser must be refreshed to make it work again.

The workaround: Create a button called "ClearBrowser". On click, save the entire DOM & scroll position to local storage, reload the browser and then restore the DOM back to its previous state, as if the browser was never refreshed.

$( function() {
    /// when checkbox is selected update the actual HTML
    $('.checkbox').change(function(e) {
        if($(this).is(':checked')){
            $(this).attr("checked", "checked");
        }else{
            $(this).removeAttr("checked");
        }   
    });


    /// ClearBrowser button 1st step ///
    $('.ClearBrowser').click(function(e) {
            localStorage.setItem('bodyHTML', $('body').html());
            localStorage.setItem('scrollTop', $(window).scrollTop());
            window.location.href = "?reload="+Date.now()+"&ClearBrowser=1";
       });


    /// Step 2 ///
    // get url params into an array //
    var params={};
    window.location.search
      .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
        params[key] = value;
      }
    );

    // restore dom, scroll to position and clear local storage //
    if (typeof params['ClearBrowser'] !== 'undefined') {
      $('body').html(localStorage.getItem('bodyHTML'));
      $(window).scrollTop(localStorage.getItem('scrollTop'));
      localStorage.removeItem("bodyHTML");
      localStorage.removeItem("scrollTop");
    }

});

FireFox browser seems to be the best to directly stream MP4 videos using video tags compared to Chrome & Safari (April 2025). However, it does get overwhelmed and stops working. This workaround is a 1 click solution to continue working with 100's of security camera videos & images tiled like thumbnails.