Why doesn't creating video var from jquery work and from getElementById does?

Question

It doesn't make sense to me, getElementById works just fine but I want to use jquery to keep the pattern of my website accessing elements. Any idea?

<script>
    $(document).ready(function () {

        var vid = document.getElementById("myVideo"); //$("#myVideo");

        $("#btnFullScreen").click(function () {
            vid.requestFullscreen();
        });

        $("#btnPlay").click(function () {
            console.log("play");
            vid.play();
        });

        $("#btnPause").click(function () {
            console.log("pause");
            vid.pause();
        });

    });

</script>

*"I want to use jquery to keep the pattern of my website accessing elements."* Why? Native JavaScript methods are alway faster than jQuery.... Also, you cannot use DOM methods on a jQuery element (that's why it doesn't work). You shouldn't convert JavaScript into jQuery for a *pattern*. — Karl-André Gagnon, Feb 16 '15 at 14:29
possible duplicate of [Play/pause HTML 5 video using JQuery](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) — BeNdErR, Feb 16 '15 at 14:48

score 2 · Accepted Answer · answered Feb 16 '15 at 14:31

2

If you use $("#myVideo"); it returns jQuery object that does not have methods like .play or .pause, in our case you need get DOM element like $("#myVideo").get(0)

jQuery .get

answered Feb 16 '15 at 14:31

Oleksandr T.

73,526
17
164
143

score 1 · Answer 2 · answered Feb 16 '15 at 14:31

The vanilla result is a little different compared to the JQ one: see fiddle

var jsDiv = document.getElementById("myVideo");
var jqDiv = $("#myVideo");

console.log(jsDiv);
console.log(jqDiv);

That's why your JQ solution is not working with .play(), as it is a JQ object and not a "pure" DOM element.

If you want to get the same result from JS and JQ, use $("#myVideo")[0]

score 1 · Answer 3 · answered Feb 16 '15 at 14:31

1

If you select an object using jQuery, you get a jQuery object returned, not the actual DOM element.

Assuming there's only one #myVideo element on the page, you can access it like this:

var vid = $('#myVideo')[0];

or

var vid = $('#myVideo').get(0);

answered Feb 16 '15 at 14:31

Knelis

6,297
2
33
53

Why doesn't creating video var from jquery work and from getElementById does?

3 Answers3