Vidéo HTML5 avec Video.js et AJAX

Question

J'ai un <div> contenant un élément <video>, et un <ul>. Cliquer sur un élément dans le <ul> provoque un appel AJAX pour mettre à jour le contenu du <div>. Lors de ma première tentative, la première vidéo se chargerait correctement, mais en cliquant sur un lien différent, l'affiche ne serait chargée que par les contrôles. Après quelques recherches sur Google, j'ai trouvé la solution à ce qui me laisse à l'appel AJAX suivant:

$.ajax({ 
    // each video has its own unique ID 
    url: "/Video?id=' + id, 
    success: function (data) { 
     $('#containing_div').html(data); 
     // necessary to re-load video player controls 
     _V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" }); 
    } 
}); 

Ajout de l'appel d'initialisation à _V_ semblait faciliter les choses un peu: maintenant, quand je passe des vidéos, le « jeu » de contrôle apparaît comme prévu, et je peux lire une vidéo. Cependant, une fois que je le fais, lorsque je passe à une vidéo différente, les contrôles sont maintenant reparties. De plus, il y a des erreurs aléatoires bizarres: si je change de vidéos plusieurs fois, les contrôles disparaissent soudainement sans raison apparente. Aussi, de temps en temps, une seconde après que je passe à une nouvelle vidéo, l'affiche vidéo disparaît complètement. Clairement, une certaine "magie" se produit dans Video.js au chargement de la page qui n'est pas déclenchée par l'appel AJAX, mais je n'ai pas réussi à comprendre ce que c'est. Il n'y a rien de mal avec les balises <video> parce qu'au début ils étaient tous alignés dans la page, et ils étaient cachés/montrés en changeant leur opacité, et cela a bien fonctionné (la raison pour laquelle je veux passer à AJAX est la taille de la page quand toutes les vidéos sont chargées en ligne).

Answer 1

Il se trouve la solution était d'appeler .destroy() (une fonction API non documentée) sur la vidéo sortante:

if(currentVideoId) { 
    _V('video_' + currentVideoId).destroy(); 
} 
$.ajax({ 
    // each video has its own unique ID 
    url: "/Video?id=' + id, 
    success: function (data) { 
    $('#containing_div').html(data); 
    // necessary to re-load video player controls 
    _V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" }); 
    currentVideoId = id; 
    } 
});