Video.js 및 AJAX를 사용한 HTML5 비디오

Question

나는 <div> 다음을 포함하는 <video> 요소 및 <ul>.에서 요소를 클릭하면 <ul> AJAX 호출로 인해 <div>.첫 번째 시도에서는 첫 번째 비디오가 올바르게 로드되었지만 다른 링크를 클릭하면 포스터만 로드되고 컨트롤은 로드되지 않았습니다.인터넷 검색을 통해 이에 대한 해결책을 찾았고 다음과 같은 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_ 문제가 다소 도움이 되는 것 같았습니다.이제 비디오를 전환하면 "재생" 컨트롤이 예상대로 나타나고 비디오를 재생할 수 있습니다.하지만 일단 다른 비디오로 전환하면 이제 컨트롤이 다시 사라집니다.게다가 이상한 무작위 오류도 있습니다.동영상을 몇 번 바꾸면 뚜렷한 이유 없이 컨트롤이 갑자기 사라집니다.또한 가끔 새 영상으로 전환한 지 1초 만에 영상 포스터가 완전히 사라지는 경우도 있습니다.

분명히 AJAX 호출에 의해 트리거되지 않는 페이지 로드 시 Video.js에서 일부 "마법"이 발생하지만 그것이 무엇인지는 알 수 없습니다.에는 아무 문제가 없습니다. <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;
  }
});