HTML5 video with Video.js and AJAX
I have <div>
one containing an element <video>
, and <ul>
. Clicking on an element in <ul>
causes an AJAX call to update the content <div>
. On my first try, the first video will load correctly, but then clicking on another link will only load the poster, not the controls. After some Googling, I found a solution that 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 an init call to _V_
it seemed to help somewhat: now when I switch videos, the game control looks as expected and I can play the video. However, once I do that, when I switch to another video, the controls now disappear again. Also, there are strange random bugs: if I change the video multiple times, all of a sudden the controls disappear for no apparent reason. In addition, sometimes, a second after switching to a new video, the video poster disappears completely.
Clearly there is some "magic" loaded on the page in Video.js that doesn't get triggered on the AJAX call, but I couldn't figure out what that is. There's nothing wrong with tags <video>
, because initially they were all inline on the page and they were hidden / shown by changing their opacity and that worked fine (the reason I want to go to AJAX is the page size is huge when all videos are loaded in line).
source to share
It turned out that 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;
}
});
source to share