How do I reference the HTML5 video element using jQuery?

Question

Given this markup

<p><a href="#">LOAD VIDEO</a></p>

<video id="video" controls width="560">
    <source id="webm" type="video/webm" />
    <span>zoom-club.webm</span>
</video>

And this script

$(document).ready(function(){

    $('a').on('click',function(){

        var path = "../assets/" + $('span').text();

        $('source').attr('src', path);

        $('video#video').load();
        $('video#video').play();

    });

});

Why do I get this error?

Uncaught TypeError: undefined is not a function

This will actually work using tradition Javascript and getElementById, but for some reason the way I am referencing the video tag is broken. What gives?

possible duplicate of Play/pause HTML 5 video using JQuery

Qantas 94 Heavy
– Qantas 94 Heavy

2014-08-23 13:07:01 +00:00
Commented Aug 23, 2014 at 13:07 — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Aug 23, 2014 at 13:07

pid · Accepted Answer · 2014-08-23 13:48:55Z

3

You get this error because

$('video#video')

gives you a jQuery object back. But it doesn't have a play() method.

So you need to extract the DOM object from it:

$('video#video')[0]

Now on this you can invoke play():

$('video#video')[0].play();

edited Aug 23, 2014 at 13:48

answered Aug 23, 2014 at 13:06

pid

11.6k6 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

andrew Over a year ago

i think .get(0) is better because it does not produce error if object contains no elements

pid Over a year ago

Good point! But his HTML is static, how could it not contain the element? In the general case it's even NECESSARY to use get()! Thanks :)

alexander farkas Over a year ago

There is no difference between [0] and get(0), both will return undefined, if the collection is empty. In fact, if you look into jQuery code, jQuery will do the exact same thing, if you pass a positive number. Beside this, jQuery has a .load and due to the fact, how this method works, it actually does invoke the native load method, altough you shouldn't use it because jQuery will also additionally dispatch a load event.

Collectives™ on Stack Overflow

How do I reference the HTML5 video element using jQuery?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related