在iPad和Android平板電腦上強制全屏HTML5視頻播放？

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上播放內聯，但我希望它在默認的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?）

但是，我想要相反的：在所有iOS和Android設備上以默認iPhone全屏格式播放視頻。

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

    }