Geek Answers Handbook

Full screen html5 video with iOS Safari web browser

Is there a way to launch full screen mode on iOS Safari (mobile Internet). Any full screen or full viewport would be great. Here is what I tried below:

<video id="mobile_content"> 
  <source src="someurltocontent"></source>
</video>


function makefullscreen(element){
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } 
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } 
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } 
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    else{
        var requestFullscreen = 
                document.documentElement.requestFullscreen ||
                document.documentElement.webkitRequestFullscreen ||
                document.documentElement.mozRequestFullscreen ||
                document.documentElement.requestFullScreen ||
                document.documentElement.webkitRequestFullScreen ||
                    document.documentElement.mozRequestFullScreen;

        if (requestFullscreen) {
           requestFullscreen.call(document.documentElement);
        } 
        else {
           console.log("really!? come on...");
        }
    }
}

When a user acts, the above function is transmitted by the video element, and if full-screen access is available, the full-screen mode is performed on the video element.

This does not work in Safari for iPad.

One way would be to apply the attr controls to the video tag, and then allow the user to initiate full screen mode using the full screen mode of the main player.

<video id="mobile_content" controls> 
     <source src="someurltocontent"></source>
</video>

Any ideas other than those prescribed?

+4
1

DOM ( video) Safari iPad, :

HTML

<div id="video-container">
    <video> 
        <source src="path/to/file.webm"></source>
        <source src="path/to/file.mp4"></source>
    </video>
</div>

JavaScript

var videoContainer = document.getElementById('video-container');
var video          = videoContainer.getElementsByTagName('video');

function toggleVideoFullscreen() {

    if (video.webkitEnterFullScreen) {
        // Toggle fullscreen in Safari for iPad
        video.webkitEnterFullScreen();
    } else {
        // Toggle fullscreen for other OS / Devices / Browsers 
    }
}

Media DOM Elems Safari iPad, DOM Elem, , div, a section ....

, webkitRequestFullscreen undefined DOM Elems Safari iPad.

!

+3

More articles:


All Articles