iPad上未触发webkitfullscreenchange事件 [英] webkitfullscreenchange event not firing on iPad

问题描述

我正在为iPad开发一些视频控件.当用户单击按钮时，视频将播放并立即全屏显示.当用户单击退出全屏"按钮时，我希望视频暂停.如果我可以禁用退出全屏"按钮并强迫用户使用完成"按钮，那似乎不是一个选择.

I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the "Exit fullscreen" button, I want the video to pause. If I could disable the "Exit fullscreen" button and force the user to use the "Done" button I would, but that doesn't seem to be an option.

我的问题是，webkitfullscreenchange事件似乎没有在iPad上触发.它可以在台式机上的Chrome浏览器中完美运行.我已经了解到，如果尚未加载元数据(iPad上的视频无法加载，则加载-忽略预加载)，iPad浏览器将不会运行您的事件，但我已经确认之前已经加载了元数据全屏事件正在触发.有谁知道为什么webkitfullscreenchange事件不会在iPad上触发?

My problem is that the webkitfullscreenchange event does not seem to fire on the iPad. It works flawlessly in Chrome on the desktop. I've read that the iPad browser won't run your event if metadata has not been loaded (which doesn't load until the video is played on the iPad - preload is ignored), but I have confirmed that metadata has been loaded before the fullscreen event is firing. Does anyone have any ideas on why the webkitfullscreenchange event will not fire on the 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称为新IE6的文章.不要指望iOS浏览器的行为像台式设备的野生动物园. 作为解决方法，您可以内联显示视频(->不使用本机全屏显示)并添加自己的控件.这种方法的缺点是浏览器导航浪费了一些垂直空间.好处是您可以完全控制正在发生的事情.遵循这个想法，您可以通过将视频(和您的自定义控件)放入容器中来模仿全屏显示，然后将容器放置在固定位置，并将其宽度和高度设置为100％-我通过添加类来做到这一点切换回正常状态时，请担心先前的尺寸.相反，您只需再次删除该类.

reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari. as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.

如果要执行此操作，请记住另一件事:无法在iOS的容器内通过JS移动视频节点.相反，您要么必须提供html的完整标记，要么要克隆视频节点，删除原始节点，然后将克隆的节点插入容器中.

one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.

这篇关于iPad上未触发webkitfullscreenchange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！