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.
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.