На моей странице я показываю видео, загруженное из Sprout таким образом
В случае, если что-то пошло не так, значит, видео не загружено из-за 404 или 403 http status, как я могу повторить попытку в 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/
Посмотрите на это:
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);
}
});
Код снова присоединяет источник видео к нему с тегом видео до 4 раз с задержкой 5 секунд.
Рабочая скрипка:
https://jsfiddle.net/3uto3swj/
Это простой случай использования setTimeout() для остановки и повторного запуска.
// 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);
}
});
Я подправил вашу скрипку, чтобы применить ее. Я удалил маленькую посыпку jQuery, так как вы, похоже, не используете ее в любом случае. Похоже, вы просто не знали, как слушать событие с vanilla JS. Плюс я добавил притворное восстановление сети и кошку.; D
Извините, если я пропустил точки с запятой. Я обычно не использую их.