带有 iOS Safari 网络浏览器的全屏 html5 视频答案

【问题标题】：Fullscreen html5 video with iOS Safari web browser带有 iOS Safari 网络浏览器的全屏 html5 视频
【发布时间】：2015-05-07 11:10:02
【问题描述】：

有没有办法在 iOS Safari（移动网络）上触发全屏。全屏或全视口都会很棒。这是我在下面尝试过的：

<video id="mobile_content"> 
  <source src="someurltocontent"></source>
</video>


function makefullscreen(element){
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } 
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } 
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } 
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    else{
        var requestFullscreen = 
                document.documentElement.requestFullscreen ||
                document.documentElement.webkitRequestFullscreen ||
                document.documentElement.mozRequestFullscreen ||
                document.documentElement.requestFullScreen ||
                document.documentElement.webkitRequestFullScreen ||
                    document.documentElement.mozRequestFullScreen;

        if (requestFullscreen) {
           requestFullscreen.call(document.documentElement);
        } 
        else {
           console.log("really!? come on...");
        }
    }
}

在用户操作时，向上述函数传递一个视频元素，如果全屏可用，则在视频元素上执行全屏。

这在 Safari for IPAD 上不起作用。

一种解决方法是将控件属性应用于视频标签，然后让用户使用本机播放器全屏启动全屏。

<video id="mobile_content" controls> 
     <source src="someurltocontent"></source>
</video>

除了上述之外还有什么想法吗？

【问题讨论】：

标签： javascript mobile-safari fullscreen html5-fullscreen

【解决方案1】：

您可以使用以下代码在 Media DOM 元素（如 video）在 iPad 版 Safari 上轻松触发全屏：

HTML

<div id="video-container">
    <video> 
        <source src="path/to/file.webm"></source>
        <source src="path/to/file.mp4"></source>
    </video>
</div>

JavaScript

var videoContainer = document.getElementById('video-container');
var video          = videoContainer.getElementsByTagName('video');

function toggleVideoFullscreen() {

    if (video.webkitEnterFullScreen) {
        // Toggle fullscreen in Safari for iPad
        video.webkitEnterFullScreen();
    } else {
        // Toggle fullscreen for other OS / Devices / Browsers 
    }
}

但是，此方法仅适用于 iPad 版 Safari 中的 Media DOM Elems，我总是在请求另一个 DOM Elem 上的全屏时遇到麻烦，例如 div、section 等..

似乎webkitRequestFullscreen 总是在 iPad 版 Safari 中的每个 DOM Elem 上返回 undefined。

祝你有美好的一天！

【讨论】：

【解决方案2】：

各位有兴趣的朋友，我花了几天时间研究处理全屏视频的最佳方法，同时考虑到跨浏览兼容性。

有3种方法：

1- 与 Netflix 一样，您将用户重定向到应用商店，而不是播放视频。

2- 您可以使用“playsinline”属性“模拟”全屏，这将避免触发移动 IOS 中的本机控件，并且 100% 的宽度看起来就像是全屏的视频。

3- 第三种方法类似于接受的答案，但包括检测全屏被触发和管理退出全屏的方式。

基本上你会在视频周围做一个包装器，我通过 useRef() (react) 获取引用，你将在包装器中触发全屏 api（如果可能）。

但在最后一种情况下，最后的else（不支持IOS Mobile的地方）你会触发另一个方法。

好的，这里是代码！！

const video = document.getElementsByTagName('video')[0];
const isInFullScreen =
    (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);
  if (!isInFullScreen) {
    if (playerWrapper.current.requestFullScreen) {
      // W3C API
      playerWrapper.current.requestFullScreen();
    } else if (playerWrapper.current.mozRequestFullScreen) {
      // Mozilla current API
      playerWrapper.current.mozRequestFullScreen();
    } else if (playerWrapper.current.webkitRequestFullScreen) {
      // Webkit current API
      playerWrapper.current.webkitRequestFullScreen();
    } else if (video.webkitEnterFullScreen) {
      // This is the IOS Mobile edge case
      video.webkitEnterFullScreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }

【讨论】：