javascript - 使用 iOS Safari 网络浏览器的全屏 html5 视频

Question

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

<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...");
        }
    }
}

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

这不适用于 IPAD 的 Safari。

---

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

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

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

Answer 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 中的媒体 DOM 元素，而且我总是在请求另一个 DOM 元素(如 div)上的全屏时遇到麻烦，一个部分等等。

似乎 webkitRequestFullscreen 总是在 Safari for iPad 中的每个 DOM 元素上返回 undefined。

祝你有美好的一天!