javascript - 失败后如何重新尝试加载视频

Question

在我的页面中，我正在显示以这种方式从 Sprout 加载的视频

万一出现问题，意味着由于 404 或 403 http 状态 视频未加载，我如何重试 4 次？ (每次等待5秒)

这是我的代码

<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/

Answer 1

看看这个:

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);
    }
});

代码将视频的 source 再次附加到 video 标签，最多 4 次，延迟 5 秒。

工作 fiddle :
https://jsfiddle.net/3uto3swj/