HTML5 Video Fullscreen not working on iPad

Question

I have an html5 video stream. I use custom controls, and bind actions to them using jQuery. One of these said controls is a fullscreen button, which calls video.webkitEnterFullScreen(). When i test this out in Safari fullscreen works fine. When I try this on an iPad it fails. What gives?

Here is how i declare my video in html:

<video preload="true" width="720" height="405"></video>

Here is the declaration of my fullscreen button:

<a href="javascript:;" class="fullscreen">
     <span class="icon"></span>
</a>

Here is how I bind the button to the action:

var video = $('video')[0];
$('body').find('.fullscreen').click(function(){
     video.webkitEnterFullscreen();
});

$('body').find('.fullscreen .icon').click(function(){
     video.webkitEnterFullscreen();
});

Again this works in safari but not on the ipad. When include alerts and logging statements into the function declaration they appear, meaning that my clicks did register with the ipad, but the video does not go into fullscreen mode. Help!

UPDATE: Just to clarify my issue, i am not having trouble with playback. The video plays in both safari desktop and safari for the ipad. On safari for the desktop, fullscreen works, but on safari for the ipad fullscreen does not work.

Answer 1

Bad news sorry... So far webkitEnterFullscreen is not supported by iPad. Good news is specs has been draft here: http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

We will need to wait little bit more for that to happen...

Answer 2

One thing, although I'm not sure it matters here, but preload="true" is no longer valid. preload can be set to one of: metadata, none or auto (which is probably what it's being set to here).

Perhaps the iPad auto default is not to preload anything, so perhaps try setting it to metadata?

Check out this too.

Answer 3

So after painstakingly tedious debugging i discovered the cause of my problem. I went through all my css rules that could be inherited by the player, and toggled them (commented them out and then back in), to see what effect that would have. Finally i found the culprit. The div that my video sits on, initially has a css class which has a rule 'visibility: hidden'. When the user presses a button the page, jQuery fires a command to change this rule from 'hidden' to 'visible'. Removing the 'visibility: hidden' rule from the initial css class allowed me to full screen on an ipad. Now I can fullscreen on the ipad, but my project design doesn't work, but that's a question for another post. I hope this helps someone else in a similar situation.

Answer 4

Apple separated the iPadOS from iOS recently (as of early 2019) and they came up with support for fullscreen api on iPad Safari as early as fall of last year (2018).

You can now support fullscreen web apps on iPadOS Safari. Share below is a cross-browser and iPadOS 12.x+ Safari only solution along with requisite code:

Going fullscreen on iPad Safari.

Disclosure: I have written the blog on the aforementioned link. Note that Chrome on iPadOS still doesn't have support for the fullscreen api, but it will only get better from here.