Force full-screen HTML5 video playback on iPad and Android tablets?

Question

I have a simple video tag:

<video id="video-1" poster="img/video/poster-1.jpg" preload="none">
  <source src="http://player.vimeo.com/external/the_video-id" type="video/mp4">
</video>

I play it via a javascript button

$('[data-play-video]').click(function(){
  var video_id = $(this).data('playVideo');
  var video_control = $(video_id)[0];
  video_control.play();
});

The video plays inline on the desktop and in the full-screen player on iPhone. On iPad it plays inline, but I want it to play full-screen in the default iOS video player—the same as on the iPhone. How can I achieve this?

I am aware of the webkit-playsinline attribute which may be used to force the video to play inline on the iPhone. ( HTML5 inline video on iPhone vs iPad/Browser ) and ( Can I avoid the native fullscreen video player with HTML5 on iPhone or android? )

I, however, want the opposite: to play the video in the default-for-iPhone full-screen format on all iOS and Android devices.

Answer 1

You can use webkitEnterFullscreen() method.

    var vid;

    function init() {

        vid = document.getElementById("myVideo");

        vid.addEventListener("loadedmetadata", addFullscreenButton, false);

    }

    function addFullscreenButton() {

        if (vid.webkitSupportsFullscreen) {

            var fs = document.getElementById("fs");

            fs.style.visibility = "visible";

        }

    }

    function goFullscreen() {

        vid.webkitEnterFullscreen();

    }