I am trying to display a video in fullscreen when the user clicks on a link/button. This is working fine in desktop but not working well on iPad using chrome.

According to this there are some restrictions but i can't find chrome/ios on that table.

If somebody tells me that it's an operative system restriction I will really appreciate a link from a nice source.

Here's some code:

HTML:

<video id="video1" width="420" controls>
    <source src=".mp4" type="video/mp4" />
    <source src=".ogg" type="video/ogg" />Your browser does not support HTML5 video.</video>

<button onclick="PlayFunction();">PLAY</button>

Javascript:

 function PlayFunction()
{
        launchFullScreen(document.getElementById("video1")); // any individual element);
    $("#video1")[0].play();

}function launchFullScreen(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 if (element.webkitRequestFullscreen) {

        element.webkitRequestFullscreen();
    } else {

        alert("no cai en ningun lado");
    }
}

JSfiddle: /

I am trying to display a video in fullscreen when the user clicks on a link/button. This is working fine in desktop but not working well on iPad using chrome.

According to this http://caniuse./fullscreen there are some restrictions but i can't find chrome/ios on that table.

If somebody tells me that it's an operative system restriction I will really appreciate a link from a nice source.

Here's some code:

HTML:

<video id="video1" width="420" controls>
    <source src="http://www.w3schools./html/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3schools./html/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video>

<button onclick="PlayFunction();">PLAY</button>

Javascript:

 function PlayFunction()
{
        launchFullScreen(document.getElementById("video1")); // any individual element);
    $("#video1")[0].play();

}function launchFullScreen(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 if (element.webkitRequestFullscreen) {

        element.webkitRequestFullscreen();
    } else {

        alert("no cai en ningun lado");
    }
}

JSfiddle: http://jsfiddle/9aSjn/16/

• javascript
• ios
• google-chrome
• video

1 Answer 1

According to this link http://www.mobilexweb./blog/chrome-ios-android-4-1-jelly-bean-html5 :

That’s is because Chrome for iOS is not Chrome. What?? It has a Chrome-style UI, onmibox, search by voice and it has Chrome synching. However, the rendering and execution engine are not Chrome.

I called them pseudo-browsers and you can see my opinion and a good discussion on the ments area in my previous post. So Chrome for iOS is in fact using the iOS Web View that share most of the code with Safari.

The User Agent that Chrome for iOS is using is the Safari one with one addition: “CriOS” (Chrome for iOS I guess). There is no “Chrome” word inside the User Agent, so if you are doing something special for Chrome, you are safe and it’s not going to be executed on Chrome on iOS.

Conclusion, when you are using Chrome on iOS you are using Safari, and that's why it doesn't appear in the caniuse table.