How to retry loading video again once it fails

This is a simple case of using setTimeout() to stall and try again.

// set counter before defining listener 
// we'll do 4 retries (or 5 total attempts)
let retries = 4;

source.addEventListener('error', function onErr(){
    // test for truthiness, then decrease by 1
    if (retries--) { 

    // after 5000ms re-append source
    setTimeout( function retry(){ 
        video.appendChild( source );
    }, 5000);
  }
});

I tweaked your fiddle to put it in action. I removed the little sprinkle of jQuery, since you don't seem to really be using it anyway. Looks like you just didn't know how to listen for an event with vanilla JS. Plus I added a pretend network recovery and a cat. ;D

😸 fiddle

Sorry if I missed any semicolons. I normally don't use them.

Have a look at this:

var retry = 0;
$('video source').on('error', function() {
    if(retry < 4){
      retry++;
      alert('something went wrong! Retrying.. '+retry+'');
      $n = $(this);
        setTimeout(function(){
        $n.appendTo( $('#video') );
      },5000);
    }
});

The code appends video's source again to the video tag up to 4 times with 5 sec delay.

Working fiddle:
https://jsfiddle.net/3uto3swj/