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

    }

在 iPad 和 Android 平板电脑上强制全屏 HTML5 视频播放？

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

javascript

ios

ipad

html5-video

fullscreen