Question

20

Web App - iPad webkitEnterFullscreen - Programatically going full-screen video

rated 0 times [ 22] [ 2] / answers: 1 / hits: 22009 / 14 Years ago, thu, january 13, 2011, 12:00:00

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

Above is an example I downloaded from Apple where you can use controls for play and fullscreen mode. In Safara/iPad it works great. However what I want to do is have people click on a link and it loads a video and then goes into fullscreen mode. So for example on the link above if after the loading dots finish it went into fullscreen that would be perfect.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
Has more information on this.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karladaijahf

Add To Favorites

Follow

Total Points: 78

Total Questions: 123

Total Answers: 89

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 14 Years ago isaacvalentinn · Accepted Answer

The best I have been able to come up with it this.

Setup your video tag and use CSS to position it off the screen someplace (it can't be set to display:none). I used absolute positioning to move it off the top left of the screen.

Then use this JS:

$('.popup.ipad a').click(function() {



        var currentID = $(this).closest('.player').find('video').attr('id');

        var videoContainer = document.getElementById(currentID);

        var newSrc = $(this).attr('href');



        videoContainer.src = newSrc;

        videoContainer.webkitEnterFullscreen();

        videoContainer.play();

});

It will play in Fullscreen great, but when the user clicks done to exit the video will continue to play off the screen (so you will hear the audio).

So, I need to figure out how to listen for an event that is fired when Done is touched (I'm not even sure there is an event for this). Or, use the method described here and run it every second to see if Fullscreen mode is being used. But I haven't had much success, no matter what what I do I get errors.

Hopefully this helps you find some answers. If so, let me know!