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