HTML5-Video mit Video.js und AJAX

Question

Ich habe eine <div> enthält ein <video> element und ein <ul>.Klicken Sie auf ein Element in der <ul> veranlasst einen AJAX-Aufruf, den Inhalt des zu aktualisieren <div>.Bei meinem ersten Versuch wurde das erste Video korrekt geladen, aber wenn ich dann auf einen anderen Link klickte, wurde nur das Poster geladen, nicht jedoch die Steuerelemente.Nach einigem Googeln habe ich die Lösung dafür gefunden, was mir den folgenden AJAX-Aufruf hinterlässt:

$.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" });
    }
});

Hinzufügen des Initialisierungsaufrufs zu _V_ schien die Sache etwas zu helfen:wenn ich jetzt Videos wechsle, wird die "Wiedergabe" -Steuerung wie erwartet angezeigt und ich kann ein Video abspielen.Sobald ich dies jedoch tue, wenn ich zu einem anderen Video wechsle, sind die Steuerelemente jetzt wieder weg.Außerdem gibt es seltsame zufällige Fehler:wenn ich Videos ein paar Mal wechsle, verschwinden plötzlich die Bedienelemente ohne ersichtlichen Grund.Gelegentlich verschwindet das Videoposter auch eine Sekunde nach dem Wechsel zu einem neuen Video vollständig.

Offensichtlich passiert etwas "Magie" im Video.js beim Laden der Seite, das nicht durch den AJAX-Aufruf ausgelöst wird, aber ich konnte nicht herausfinden, was das ist.Es ist nichts falsch mit dem <video> tags, weil sie anfangs alle inline auf der Seite waren und durch Ändern ihrer Deckkraft ausgeblendet / angezeigt wurden, und das hat gut funktioniert (der Grund, warum ich zu AJAX wechseln möchte, ist, dass die Seitengröße riesig ist, wenn alle Videos geladen werden inline).

Answer 1

Es stellte sich heraus, dass die Lösung darin bestand, anzurufen .destroy() (eine undokumentierte API-Funktion) für das ausgehende Video:

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