How to access HTML5 video methods using jQuery?

Question

I am writing an HTML5 application and I am trying to access my own video methods (play, pause, etc.) and use jQuery. I do not want to use other plugins.

var movie = $('#video_with_controls'); $('#buttonX').click(function() { movie.play(); }); 

But when I execute the previous code, I get the following console error message:

 Object has no method 'play' 

How to fix it? Thanks.

Answer 1

The HTML5 DOM DOM element has a .play () method. JQuery has no play method yet . What you do wrong starts the game from the jQuery selector, which returns an array of elements.

For example, $('#clip') returns [<video width=​"390" id=​"clip" controls>​…​</video>​] , which is actually an array of a single DOM element. To access the actual DOM element, you need to access one of the elements in the array by doing something like $('#clip')[0] . Now you can point this DOM element to PLAY.

So just do it:

 var movie = $('#video_with_controls'); $('#buttonX').click(function() { movie[0].play(); //Select a DOM ELEMENT! }); 

This is my example:

HTML:

  <video width="390" id="clip" controls=""> <source src="http://slides.html5rocks.com/src/chrome_japan.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;"> </video> <input type="button" id="play" value="PLAY" /> 

JQuery

 $('#play').click(function(){ $('#clip')[0].play() }); 

This works: http://jsbin.com/erekal/3