StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 Video with Video.js and AJAX
text
Body
copied!<p>I have a <code><div></code> containing a <code><video></code> element, and a <code><ul></code>. Clicking on an element in the <code><ul></code> causes an AJAX call to update the contents of the <code><div></code>. 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:</p> <pre><code>$.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" }); } }); </code></pre> <p>Adding the initialization call to <code>_V_</code> 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.</p> <p>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 <code><video></code> 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).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload