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

Posted 2023-05-08

【中文标题】在 iPad 和 Android 平板电脑上强制全屏播放 HTML5 视频？

【英文标题】：Force full-screen HTML5 video playback on iPad and Android tablets?

【发布时间】：2015-06-04 11:58:19

【问题描述】：

我有一个简单的视频标签：

<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 的默认全屏格式播放视频。

【参考方案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();

    

【讨论】：

谢谢，我用了video_conrol.webkitEnterFullscreen();，它似乎可以在iPad上运行！