Question

I’m using the set-up from Introducing HTML5 to display a <video> element with custom controls. (See example at http://introducinghtml5.com/examples/ch04/custom-controls.html).

I have used it successfully in the past. However, the difference this time is that I am including the <video> element in a piece of HTML that is loaded by AJAX. The element loads, but the javascript that applies the custom controls fails. Logging the video variable (which is defined as “var video = document.getElementsByTagName('video')[0]“) returns undefined.

I think that because the <video> is not present on the initial page load, that variable will always be undefined. But is there perhaps another way to select it so that my video variable will be defined?

Answer 1

You need to move the code that needs access to the video element to inside the complete or success callback of the ajax request.

var video
$(selector).load("somepage.html",function(){
  video = document.getElementsByTagName('video')[0];
  video.doSomething();
});
// video will still be undefined here until after
// the complete callback above is ran.