webkit fullscreenchange 事件未在 iPad 上触发答案

【问题标题】：webkitfullscreenchange event not firing on iPadwebkit fullscreenchange 事件未在 iPad 上触发
【发布时间】：2011-12-09 18:42:25
【问题描述】：

我正在为 iPad 开发一些视频控件。当用户单击按钮时，视频会播放并立即全屏显示。当用户单击“退出全屏”按钮时，我希望视频暂停。如果我可以禁用“退出全屏”按钮并强制用户使用“完成”按钮，我会这样做，但这似乎不是一个选项。

我的问题是 webkitfullscreenchange 事件似乎没有在 iPad 上触发。它在桌面上的 Chrome 中完美运行。我已经读到，如果尚未加载元数据，iPad 浏览器将不会运行您的事件（在 iPad 上播放视频之前不会加载 - 预加载被忽略），但我已经确认之前已加载元数据全屏事件正在触发。有没有人知道为什么 webkitfullscreenchange 事件不会在 iPad 上触发？

<script type="text/javascript">
$(document).ready(function() {
    $(".jqVidLink").click(function(e) {
            e.preventDefault();
            var vidId = $(this).attr("name");
            playPause(document.getElementById(vidId));
    }); 
    $(".jqVideo").each(function() {
        this.addEventListener("webkitfullscreenchange", function(){
            alert("hi2"); //never fires
             if (document.webkitIsFullScreen == false) {
                 playPause(this);
             }
        }, false);
        this.addEventListener("loadedmetadata", function() {
            alert("hi");  //firing
            this.webkitEnterFullscreen();   
        }, false);
    });
});

 function playPause(myVideo) {
    if (myVideo.paused){
        myVideo.play();

    }
    else
        myVideo.pause();
    }

【问题讨论】：

这里相同（旧问题，旧 ipad）。 FWIW，我确实在窗口对象上获得了“调整大小”事件。如果您进入全屏，您可以标记自己，并且相信下一次调整大小是全屏更改。或方向改变...

标签： ipad html video

【解决方案1】：

让我想起一篇文章称 iPad 为新的 IE6。不要期望 iOS 浏览器表现得像桌面 safari。作为一种解决方法，您可以显示视频内联（--> 不使用本机全屏）并添加您自己的控件。这种方法的缺点是浏览器导航浪费了一些垂直空间。好处是你可以完全控制正在发生的事情。按照这个想法，您可以通过将视频（和您的自定义控件）放在一个容器中来模拟全屏，然后必须将其定位固定并调整为 100% 的宽度和高度 - 我通过添加一个类来做到这一点，因为你没有切换回正常时担心以前的大小。相反，您只需再次删除该类。

如果您想这样做，请记住另一件事：您不能通过 JS 在 iOS 上的容器内移动视频节点。相反，您要么必须在 html 中提供完整标记，要么克隆视频节点，删除原始节点并将克隆的节点插入容器中。

【讨论】：

【解决方案2】：

你可以试试.element:-webkit-full-screen css 属性

我无法在 Safari 上为 iframe 注册全屏退出事件

【讨论】：