So fügen Sie Ereignis-Listener in JS hinzu, wenn HTML5-Video nicht geladen werden kann

Question

In einer Django-Website, die ich erstellt habe, können Benutzer Videos hinzufügen, um andere zu sehen und zu kommentieren. Nicht alle Benutzer haben Geräte, die Videowiedergabe unterstützen, und daher möchte ich für solche Randfälle erlauben, Video-Download.

Um dies zu tun, muss ich zuerst erkennen, ob das Video fehlgeschlagen ist oder nicht. Wie kann ich das machen? Ich habe unten eine funktionierende Lösung, aber mit Problemen, die ich lösen muss.

---

Derzeit versuche ich folgendes in meiner Django-Vorlage (wo alle Videos eine ListView mit aufgeführt sind). Das funktioniert tatsächlich, aber bricht, wenn ich die Seite neu zu laden:

<script> 
    var videos = document.querySelectorAll('video'); 
    for (var i = 0; i < videos.length; i++) { 
     (function() { 
      var v = videos[i]; 
      var s = v.querySelector('source'); 
       //console.log(source); 
      s.addEventListener('error', function(ev) { 
       var d = document.createElement('div'); 
       d.innerHTML = v.innerHTML; 
       console.log("hello") 
       console.log(v); 
       v.parentNode.replaceChild(d, v); 
      }, false); 
     }()); 
    } 
</script> 

D.h. zuerst gehe ich durch alle video Tags in der HTML-Seite, dann suche ich für jedes Tag das source-Tag nach innen. Als Nächstes versuche ich, dem Quell-Tag einen Ereignis-Listener hinzuzufügen, den Fehler abzufangen und etwas zu verarbeiten. Ich habe jedoch festgestellt, dass der Ereignis-Listener nicht ausgelöst wird, wenn ich die Seite neu lade. Eventuell wird der Event-Handler zu spät hinzugefügt. der Browser hat bereits versucht, auf die Videoquelle zuzugreifen, bevor der Ereignishandler hinzugefügt wurde. Kann mir hier jemand helfen? Danke im Voraus.

Answer 1

Sie load Falle window können src von <video> Element zu setzen, Node.replaceChild(), download Attribut bei <a> Element

window.onload = function() { 
 
    var video = document.querySelector("video"); 
 
    video.addEventListener("error", function(event) { 
 
    var a = document.createElement("a"); 
 
    a.href = this.src; 
 
    a.innerHTML = "download media"; 
 
    a.download = ""; // set suggested file name here 
 
    this.parentElement.replaceChild(a, this); 
 
    }); 
 
    video.src = "media.file"; 
 
}

<video controls=""> 
 
    <source src="" type="video/mp4"> 
 
</video>