HTML5 Video with Video.js and AJAX -

i have <div> containing <video> element, , <ul>. clicking on element in <ul> causes ajax call update contents of <div>. on first attempt, first video load correctly, clicking on different link load poster, not controls. after googling, found solution that, leaves me following ajax call:

$.ajax({     // each video has own unique id     url: "/video?id=' + id,     success: function (data) {         $('#containing_div').html(data);         // necessary re-load video player controls         _v_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });     } }); 

adding initialization call _v_ seemed matters somewhat: when switch videos, "play" control appears expected, , can play video. however, once do, when switch different video, controls gone again. furthermore, there weird random errors: if change videos few times, controls disappear no apparent reason. also, occasionally, second after switch new video, video poster disappears completely.

clearly, "magic" happens in video.js on page load not being triggered ajax call, haven't been able figure out is. there's nothing wrong <video> tags because in-line in page, , being hidden/shown changing opacity, , worked fine (the reason want move ajax page size huge when videos loaded in-line).

it turns out solution call .destroy() (an undocumented api function) on outgoing video:

if( currentvideoid ) {   _v('video_' + currentvideoid).destroy(); } $.ajax({   // each video has own unique id   url: "/video?id=' + id,   success: function (data) {     $('#containing_div').html(data);     // necessary re-load video player controls     _v_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });     currentvideoid = id;   } });