how to make html5 player play on Ipad fullscreen using UIWebView

Question

I have a video application where I have added custom css to HTML5 player. It works fine in windows browser both in minimised and maximised mode.But in case of Ipad fullscreen HTML5 does not show up instead native player comes into play.

How can we make HTML5 player to play on Ipad fullscreen mode instead of native player. I came to know that if it is Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES. We can make HTML5 player appear.But what is UIWebView and how can I make use of it?

Any kind of help is greatly appreciated.please help.

Answer 1

UIWebView refers to development of application (App Store) using either native code or using web languages with technologies like Phonegap. It is a component that allows to render a webpage in an application.

Apple does not allow to control its native fullscreen experience on iPad/iPhone when you watch HTML5 video in Safari iOS - the video will play in the default quicktime player when in fullscreen. It is stated here.

allowsInlineMediaPlayback is used in a UIWebView as an HTML5 video tag property to allow video to play inline (aka in window mode) and so that the native fullscreen player is not automatically toggled when video is watched on an iPhone/iPod.

To achieve what you want you can either build an App for this or if you want to stick to browser based video display in HTML5 you can emulate fullscreen on iPad (and iPad only - it will not work on iPhone/iPod). For that you need to develop your own custom controls and extend the dimension in CSS of the video tag to the full width and height of the view port.

This is a bit tricky but you can read here - section Pseudo Fullscreen - for a start. IE9 and 10 for example do not support native fullscreen in HTML5 video and you need to implement this approach as well.

I personally use something slightly different like:

.fullscreen{
    position:fixed;
    z-index:1000;
    left:0; right:0; top:0; bottom:0;
    width:100%; 
    height:100%;
    background:#000000;
    overflow:hidden;
}

For the iPad you can bypass the native full screen approach with this pseudo fullscreen angle. You may also want to read here on how to detect native fullscreen capabilities in browser.