HTML5 Video with Video.js and AJAX

Question

I have a <div> containing a <video> element, and a <ul>. Clicking on an element in the <ul> causes an AJAX call to update the contents of the <div>. On my first attempt, the first video would load correctly, but then clicking on a different link would only load the poster, but not the controls. After some Googling, I found the solution to that, which leaves me with the following AJAX call:

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

Adding the initialization call to _V_ seemed to help matters somewhat: now when I switch videos, the "play" control appears as expected, and I can play a video. However, once I do, when I switch to a different video, the controls are now gone again. Furthermore, there are weird random errors: if I change videos a few times, suddenly the controls disappear for no apparent reason. Also, occasionally, a second after I switch to a new video, the video poster disappears completely.

Clearly, some "magic" happens in Video.js on page load that is not being triggered by the AJAX call, but I haven't been able to figure out what that is. There's nothing wrong with the <video> tags because initially they were all in-line in the page, and they were being hidden/shown by changing their opacity, and that worked fine (the reason I want to move to AJAX is the page size is huge when all the videos are loaded in-line).

Answer 1

It turns out the solution was to call .destroy() (an undocumented API function) on the outgoing video:

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