Why can't I select use .play() selecting the video using jQuery?

Question

Why does this work

var v = document.getElementsByTagName("video")[0];  
v.play();

And this

$("#movie").play();

or this

$("video").play();

doesn't? (assuming there is only one video element on the page)

Answer 1

Because when you use .play() on a jQuery selected object you end up calling that function on that object which, in fact is not a real DOM nodes but rarther a collection of DOM nodes wrapped in a jQuery object. And that object just doesn't know about any play function.

In fact the jQuery object can even be empty when the selector doesn't hit anything, all calls to that package are still working, but as there are not targets it won't have any effect.

If you call on that package in an array like way (var v = document.getElementsByTagName("video")[0];) and there is at least one DOM node inside, you get a real DOM node as a return object. This node is aware of the .play() function.

See here: Play/pause HTML 5 video using JQuery

Answer 2

There are two problems. There is probably no element with id "video" on your page, so the first jQuery statement is not returning anything. The problem with the second statement is that it returns an array which does not have a play() method.

The second problem is that jQuery returns a jQuery object and you have to get the underlying DOM element to be able to call "native" methods.

So you are probably looking for something like this:

$("viedeo")[0].play ():

This will call the play() method on the first DOM element returned.