HTML5-видео с Video.js и AJAX

Question

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