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?

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?

• javascript
• jquery
• html

• possible duplicate of Play/pause HTML 5 video using JQuery – Qantas 94 Heavy Commented Aug 23, 2014 at 13:07

1 Answer 1

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