在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上內聯播放。 （ iPhone與iPad /瀏覽器上的HTML5內嵌視頻 ）和（ 我可以在iPhone或Android上避免使用HTML5的原生全屏視頻播放器嗎？ ）

但是，我想要反過來：在所有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();

    }