HTML5 видео с Video.js и AJAX - PullRequest
Новая
       9

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

3 голосов
/ 10 марта 2012

У меня есть <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, - это размер страницы огромен, когда все видео загружены в линию).

1 Ответ

4 голосов
/ 14 марта 2012

Оказалось, что решением было вызвать .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;
  }
});
...