La source bloquée de l'élément vidéo HTML ne réussit pas à déclencher l'événement d'erreur

Question

J'enchaîne une vidéo sur une page accessible uniquement si l'utilisateur est connecté sur un domaine différent. SI ils ne sont pas connectés, je voudrais écouter un événement d'erreur et changer l'élément en un lien vers la page de connexion. Malheureusement, ni le .mediafallbacklink ni le an event listener ne fonctionnent correctement. Seul un lecteur vidéo désactivé est affiché. Des idées?

Lors des essais, l'élément embed est sur localhost:1337 et la source vidéo est sur localhost.

<video data-setup-lazy="{&quot;language&quot;: &quot;en&quot;, &quot;fluid&quot;: true}" class="video-js" preload="auto" controls="true" title="Export Compliance"> 
    <source src="http://localhost/pluginfile.php/myvideo.mp4" type="video/mp4"> 
    <a class="mediafallbacklink" href="http://localhost/pluginfile.php/myvideo.mp4">Video Source</a> 
</video> 

JavaScript:

$(function(){ 
    console.log("this works:", document.querySelector("video")); 
    document.querySelector("video").onerror = function(event) { 
    console.log("but this never fires:", event); 
    var a = document.createElement("a"); 
    a.href = this.src; 
    a.innerHTML = "Video Source"; 
    a.download = videoPlayer.src; 
    this.parentElement.replaceChild(a, this); 
    }; 
}); 

Cette erreur est affichée dans la console JavaScript (Chrome 60):

GET http://localhost/pluginfile.php/myvideo.mp4 
net::ERR_UNEXPECTED_PROXY_AUTH 

Answer 1

tag video ne se déclenche pas un événement error si elle ne peut pas trouver l'URL spécifiée
Au lieu de cela, vous devriez écouter la balise <source> à l'intérieur de la balise <video> pour l'événement error comme ci-dessous.

$("video source").on("error", function(e) { 
 
    alert(e.type); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<video id="video" data-setup-lazy="{&quot;language&quot;: &quot;en&quot;, &quot;fluid&quot;: true}" class="video-js" preload="auto" controls="true" title="Export Compliance"> 
 
    <source src="http://localhost/pluginfile.php/myvideo.mp4" type="video/mp4"> 
 
    <a class="mediafallbacklink" href="http://localhost/pluginfile.php/myvideo.mp4">Video Source</a> 
 
</video>