HTML5 Видео с Video.js и AJAX

Question

У меня есть <div>, содержащий элемент <video>, и <ul>. Нажатие на элемент в <ul> вызывает вызов AJAX для обновления содержимого <div>. С моей первой попытки первое видео будет загружаться правильно, но затем нажатие на другую ссылку будет загружать только плакат, но не элементы управления. Через некоторое Googling, я нашел решение, что, что оставляет меня следующим 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" }); 
    } 
}); 

Добавление вызова инициализации _V_, казалось, помочь делу несколько: теперь, когда я включаю видео, «игра» контроль появляется, как ожидалось, и я могу воспроизводить видео. Однако, как только я это сделаю, когда я переключаюсь на другое видео, элементы управления теперь снова исчезают. Кроме того, есть странные случайные ошибки: если я несколько раз меняю видео, внезапно элементы управления исчезают без видимых причин. Кроме того, изредка, спустя секунду после перехода на новое видео, плакат видео полностью исчезает.

Очевидно, что некоторая «магия» происходит в Video.js при загрузке страницы, которая не вызвана вызовом AJAX, но я не смог понять, что это такое. Нет ничего плохого в тегах <video>, потому что изначально они были все в строке на странице, и они были скрыты/показаны, изменив их непрозрачность, и это сработало хорошо (причина, по которой я хочу перейти на AJAX, - это размер страницы когда все видео загружаются в режиме онлайн).

Answer 1

Оказывается, решение было назвать .destroy() (недокументированная функция API) для исходящего видео:

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