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

    }

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

1 个答案: