Включение полноэкранного воспроизведения HTML5-видео на iPad и планшеты Android?

Question

У меня есть простой тег видео:

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

Я играю его через Javascript кнопку

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

видео играет рядный на рабочем столе и в полноэкранном режиме игрока на iPhone. На iPad он играет inline, но я хочу, чтобы он воспроизводил полноэкранный режим в видеопроигрывателе iOS по умолчанию - так же, как и на iPhone. Как я могу это достичь?

Я знаю об атрибуте webkit-playsinline, который может использоваться для принудительного воспроизведения видеороликов на iPhone. (HTML5 inline video on iPhone vs iPad/Browser) и (Can I avoid the native fullscreen video player with HTML5 on iPhone or android?)

Я, однако, хочу обратное: воспроизведение видео в полноэкранном формате по умолчанию для iPhone на всех устройствах iOS и Android.

Answer 1

Вы можете использовать метод webkitEnterFullscreen().

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(); 

    }