Geek Answers Handbook

Web application - iPad webkitEnterFullscreen - Programmatically view full-screen video

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

Below is an example that I downloaded from Apple, where you can use the controls for playback and full screen mode. On Safara / iPad, it works great. However, I want people to click on the link and upload the video, and then go into full screen mode. So, for example, from the link above, if after the points are finished loading it enters full-screen mode, which would be ideal.

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

+3
javascript safari html5-video ipad fullscreen
source share
4 answers

The best I've managed to come up with is this.

Customize your video tag and use CSS to place it somewhere on the screen (it cannot be set: none). I used absolute positioning to move it in the upper left corner 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 full screen mode, but when the user clicks "done" to exit the video, it will continue to play the screen (so you hear a sound).

So, I need to figure out how to listen for an event that fires when "Done" is touched (I'm not even sure if there is an event for this). Or use the method described here and run it every second to find out if full-screen mode is used. But I did not have much success, no matter what I do, I get errors.

Hope this helps you find the answers. If so, let me know!

+5
source share

The secret is that you cannot enter full screen mode until the video metadata is uploaded. Apple Status :

This [webkitSupportsFullscreen] property is also incorrect if the meta is loading data or the metadata event is being loaded, and if the files are audio only. "

So, to start full-screen mode at the right time, just create an event listener for the loaded metadata event:

 videoContainer.addEventListener('loadedmetadata', function() { if (videoContainer.webkitEnterFullscreen) { videoContainer.webkitEnterFullscreen(); } });

Armed with this, you should be able to programmatically add and play full-screen videos on iOS, whether you use the off-screen video screen that Drew mentioned or adding video libraries dynamically.

+3
source share

I think your problem is trying to get a non-user to invoke full-screen mode, which will not work. The user must call a full-screen request by pressing a button, etc. Waiting for a video to load and then go into full-screen mode is not the same thing.

@ Drew Baker Here is the message I made last night in full screen: http://johncblandii.com/2011/07/html5-video-fullscreen.html .

+2
source share

I am also working on this issue. Attempting to play a video in full screen at the touch of a button.

Maybe I'm wrong, but here's how I made money (on ipad air, iphone 5, galaxy 3, nexus 7 ... everything except ipad 2, where the video will not be full-background) but it will play)

To play a video, you just have to click on it. Every time I use JQUERY, it just doesn't work on iOS devices. I think iOS is very sensitive to getting away from direct clicks. So, you place the onclick handler directly on the element you want to click, for example:

 <div onclick='openAndPlay(event);' id='video_layover' ></div> function openAndPlay(event) { myvideo.play(); myvideo.webkitEnterFullscreen(); return false; }

I found that order is important. Play first, then full screen request. Try it and see if it works for you. Perhaps an incorrect return value is not necessary.

+1
source share

More articles:


All Articles