How access HTML5 video methods with jQuery?

Question

I'm writing an HTML5 app and I'm trying to access native video methods (play, pause, etc...) and use jQuery. I don't want to use any other plugins.

var movie = $('#video_with_controls');

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

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

Object has no method 'play'

How do I fix this? Thanks.

Answer 1

HTML5 video DOM element does have .play() method. There is no play method in jQuery yet. What you're doing wrong is firing play from a jQuery selector that returns array of elements.

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

So just do this:

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()
});

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