In my page i am showing a Video loaded from Sprout this way

In case , if something went wrong , means video is not loaded due to 404 , or 403 http status , how can i retry for 4 times ? (waiting for 5 seconds each time )

This is my code

<video id="video" width="200" height="200" controls>
   <source id='currentVID' src="" type="video/mp4">
</video>


var actualvideo = '.mp4';
if (actualvideo !== '') {
    var video = document.getElementById('video');

    $('video source').last().on('error', function() {

    alert('something went wrong');

    });


    video.pause();
    var source = document.getElementById('currentVID');
    source.setAttribute('src', actualvideo);
    video.appendChild(source);
}

/

In my page i am showing a Video loaded from Sprout this way

In case , if something went wrong , means video is not loaded due to 404 , or 403 http status , how can i retry for 4 times ? (waiting for 5 seconds each time )

This is my code

<video id="video" width="200" height="200" controls>
   <source id='currentVID' src="" type="video/mp4">
</video>


var actualvideo = 'https://api-files.sproutvideo.com/file/7c9adbb51915e2cdf4/b6e4822661adad1aremovethis/240.mp4';
if (actualvideo !== '') {
    var video = document.getElementById('video');

    $('video source').last().on('error', function() {

    alert('something went wrong');

    });


    video.pause();
    var source = document.getElementById('currentVID');
    source.setAttribute('src', actualvideo);
    video.appendChild(source);
}

https://jsfiddle.net/o2gxgz9r/9974/

• javascript
• jquery

• Can you clarify: you want the error to be handled only upon HTTP 404/403 errors? No other errors (HTTP status 0, decode/decryption error, network error, etc.)? – Jamie Birch Commented Aug 17, 2017 at 16:43
• 1 That does not make any sense. A 404 error means that the file/resource does not exist. Why do you want to retry loading from the same url that responded with a 404 error? If you're getting such errors and the files are there, then there is something wrong with your setup|configuration|code. Maybe you want to try a different source link each time? – Christos Lytras Commented Aug 17, 2017 at 22:41
• 1 @ChristosLytras While it's a pretty contrived example (and a bad setup), imagine that the user uploads a .mov file to Pawan's service to be converted into .mp4, and is given a link to the .mp4, but it will take a few minutes first for the .mov to be re-encoded and finally moved into that location first. That's the only plausible setup that comes to mind for this use case. – Jamie Birch Commented Aug 18, 2017 at 9:23
• @JamieBirch absoltely correct , we upload a video to Sprout , it says video state is deployed but it is taking time to display actually . – Pawan Commented Aug 18, 2017 at 10:07

2 Answers 2

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/

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