Using jQuery and webkitEnterFullscreen()

Question

I'm trying to launch fullscreen video on an iPad where the user can touch an image and the video will launch fullscreen.

I have it working, but I have to stop using jQuery for one thing.

        $(function(){

            // hide video and button until we know they're loaded
            $("#myVideo").css({'visibility' : 'hidden', 'display' : 'none'});
            $("#fs").css({'visibility' : 'hidden'});

            // video is loaded
            $("#myVideo").bind('loadedmetadata', function () {
                // show button to launch video
                $("#fs").css({'visibility' : 'visible'});
            });

            // extend button functionality
            $('#fs').bind('click', function() {
                // display the video
                $("#myVideo").css({'visibility' : 'visible', 'display' : 'block'});

                // launch the video fullscreen
                $("#myVideo").webkitEnterFullscreen();
            });
        });

The click ends up returning Uncaught TypeError: Object [object Object] has no method 'webkitEnterFullscreen'

However, when I change my bind/click to:

            // extend button functionality
            $('#fs').bind('click', function() {
                // display the video
                $("#myVideo").css({'visibility' : 'visible', 'display' : 'block'});

                // launch the video fullscreen
                var vid = document.getElementById("myVideo");
                vid.webkitEnterFullscreen();
            });

Then it works with no error. What am I doing wrong with my jQuery?

jQuery is just a library for making javascript a little simpler, and jQuery objects are not the same as JS objects, either use the JS object the way you are doing, or add `[0]` or `get(0)` after the jQuery object to make it a JS object, allthough it seems like just a detour to me. — adeneo, Feb 28 '12 at 17:05

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

From what i can tell the issue is that jQuery selectors return an array of matching elements wrapped in a jquery object. One option would be $('#myVideo')[0].webkitEnterFullscreen(); though you should typically only run the selectors once as each time it causes a DOM search.

Related answer: https://stackoverflow.com/a/4070010/701062

edited May 23 '17 at 10:34

Community

1
1

answered Feb 28 '12 at 17:06

Gary.S

7,076
1
26
36

1

Thank you for the quick reply. Didn't know that jQuery wrapped as an object, but makes sense now. Sorry for the dupe and thank you again! – bafromca Feb 28 '12 at 17:25

Using jQuery and webkitEnterFullscreen()

1 Answers1