Question

我正在为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();
    }

Answer 1

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

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

Answer 2

你可以试试 background: #000; font: "Comic Sans", Wingdings, sans-serif; } .myClass { color: red; css 属性

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

webkitfullscreenchange事件未在iPad上触发

2 个答案: