Wymuś odtwarzanie wideo HTML5 na pełnym ekranie na iPadzie i tabletach z Androidem? - javascript, ios, ipad, html5-video, fullscreen

Mam prosty tag wideo:

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

Gram w to za pomocą przycisku javascript

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

Wideo jest odtwarzane bezpośrednio na pulpicie oraz wodtwarzacz pełnoekranowy na iPhonie. Na iPadzie gra on inline, ale chcę, aby grał na pełnym ekranie w domyślnym odtwarzaczu wideo na iOS - tak samo jak na iPhonie. Jak mogę to osiągnąć?

Jestem świadomy webkit-playsinline atrybut, który może być użyty do wymuszenia odtwarzania wideo na iPhonie. (Wbudowane wideo HTML5 na iPhonie vs iPadzie / przeglądarce) i (Czy mogę uniknąć natywnego pełnoekranowego odtwarzacza wideo z HTML5 na iPhonie lub Androidzie?)

Chcę jednak odwrotnie: odtwarzać wideo w domyślnym formacie pełnoekranowym dla iPhone'a na wszystkich urządzeniach z iOS i Androidem.

Odpowiedzi:

Możesz użyć metody 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();

}