html5视频播放 ajax,html - HTML5 Video with Video.js and AJAX - Stack Overflow

I have a

containing a element, and a

• . Clicking on an element in the
  • causes an AJAX call to update the contents of the

. 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 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).