webkitfullscreenchange event not firing on 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.

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();
    }

回答1:

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.

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.

来源：https://stackoverflow.com/questions/8450152/webkitfullscreenchange-event-not-firing-on-ipad