2017-07-12 24 views
15

W mojej stronie pokazuję Wideo załadowane z Sprout ten sposóbJak ponowić ładowanie wideo ponownie raz zawiedzie

W przypadku, gdyby coś poszło nie tak, oznacza wideo nie jest ładowany z powodu 404 lub 403 http status, w jaki sposób mogę ponowić próbę 4 razy? (Oczekiwanie na 5 sekund za każdym razem)

To jest mój kod

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

+0

Czy możesz wyjaśnić: chcesz, aby błąd był obsługiwany tylko po błędach HTTP 404/403? Brak innych błędów (status HTTP 0, błąd dekodowania/deszyfrowania, błąd sieci itp.)? –

+1

To nie ma żadnego sensu. Błąd 404 oznacza, że ​​plik/zasób nie istnieje. Dlaczego chcesz ponowić ładowanie z tego samego adresu URL, który odpowiedział błędem 404? Jeśli dostajesz takie błędy, a pliki tam są, to jest coś nie tak z twoim setup | configuration | code. Może za każdym razem chcesz wypróbować inny link źródłowy? –

+1

@ChristosLytras Chociaż jest to dość wymyślny przykład (i zła konfiguracja), wyobraź sobie, że użytkownik przesyła plik .mov do usługi Pawana, aby go przekonwertować do .mp4, i ma link do pliku .mp4, ale zajmie to kilka minut po raz pierwszy, aby .mov został ponownie zakodowany i ostatecznie przeniesiony do tego miejsca. To jedyna prawdopodobna konfiguracja, która przychodzi na myśl w tym przypadku użycia. –

Odpowiedz

9

Wystarczy popatrzeć na to:

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

Kod dodaje źródło wideo znów na to wideo taguj do 4 razy z 5-sekundowym opóźnieniem.

skrzypce robocza:
https://jsfiddle.net/3uto3swj/

+0

Uwaga: to nie tylko wywołuje błędy HTTP 404/403; będzie również uruchamiany (może być zależny od przeglądarki), jeśli wideo zacznie się ładować pustym src. –

+0

Dziękuję bardzo ... – Pawan

3

Jest to prosta sprawa korzystania setTimeout() do przeciągnięcia i spróbuj ponownie.

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

Poprawiłem twoje skrzypce, aby je uruchomić. Usunąłem mały posyp z jQuery, ponieważ i tak nie wydaje się, że tak naprawdę go używasz. Wygląda na to, że po prostu nie wiesz, jak słuchać wydarzenia z waniliowym JS. Plus dodałem udawaną sieć odzyskiwania i kota. ; D

fiddle

Przepraszam, jeśli brakowało mi żadnych średników. Zwykle ich nie używam.