Vídeo HTML5 con Video.js y AJAX

Question

tengo un <div> que contiene un <video> elemento, y un <ul>.Al hacer clic en un elemento del <ul> provoca una llamada AJAX para actualizar el contenido del <div>.En mi primer intento, el primer vídeo se cargaba correctamente, pero luego al hacer clic en un enlace diferente solo se cargaba el póster, pero no los controles.Después de buscar en Google, encontré la solución, lo que me deja con la siguiente llamada AJAX:

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

Agregar la llamada de inicialización a _V_ pareció ayudar un poco en las cosas:Ahora, cuando cambio de vídeo, el control "reproducir" aparece como se esperaba y puedo reproducir un vídeo.Sin embargo, una vez que lo hago, cuando cambio a un video diferente, los controles desaparecen nuevamente.Además, hay errores aleatorios extraños:Si cambio de vídeo un par de veces, de repente los controles desaparecen sin motivo aparente.Además, ocasionalmente, un segundo después de cambiar a un nuevo vídeo, el póster del vídeo desaparece por completo.

Claramente, ocurre algo de "magia" en Video.js al cargar la página que no se activa con la llamada AJAX, pero no he podido descubrir qué es.No hay nada malo con el <video> etiquetas porque inicialmente estaban todas en línea en la página y se ocultaban/mostraban cambiando su opacidad, y eso funcionó bien (la razón por la que quiero pasar a AJAX es que el tamaño de la página es enorme cuando todos los videos están cargados en línea).

Answer 1

Resulta que la solución fue llamar a .destroy() (una función API no documentada) en el vídeo saliente:

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