ipad/iphone 上的 webkitIsFullScreen？

Question

我有一个应用程序，只要方向改变（ipad/iphone），就需要刷新页面。在此应用程序中，HTML5 视频也会在 UX 中的特定时间呈现。每当用户以全屏模式观看视频时，如果设备尚未处于该模式，他们首先倾向于将设备旋转到横向。然而，当他们这样做时，它会触发令人讨厌的页面重新加载，从而有效地结束他们的观看会话。通过利用 webkit 全屏 API，我能够编写逻辑来控制这种行为，它可以在 Safari 桌面以及开发人员工具中选择的 iPad/iPhone 用户代理上完美运行，但它不适用于本机 iphone/ipad .

document.webkitIsFullScreen 在 Safari 的控制台中正确返回 false/true，但在 iphone/ipad 上显示为未定义。谁能告诉我如何在 ipad/iphone 上完成此操作，因为这些是唯一需要此功能的设备？还是我忽略了一个更简单的解决方案？非常感谢任何帮助！

$(document).ready( function () {

    var video = document.getElementById('video');

    var canrefresh = true;      

    video.addEventListener("webkitfullscreenchange",function(){
        // Detects if video is in full screen mode and toggles canrefresh variable
        // canrefresh = false when webkitfullscreenchange event is heard
        // canrefresh = true after exiting full screen
        if (canrefresh == true) {
            canrefresh = false;
        } else {
            canrefresh = true;
        }

        console.log(document.webkitIsFullScreen+' | '+canrefresh);
    }, false);

    $(window).resize(function() {
        // Look to make sure not in full screen, and canrefresh variable is true before refreshing page
        if((document.webkitIsFullScreen == false) && (canrefresh == true)){
            window.location = window.location.href+'?v='+Math.floor(Math.random()*1000);
        }
    });

    console.log(document.webkitIsFullScreen+' | '+canrefresh);
    $('body .test').text(document.webkitIsFullScreen+' | '+canrefresh); // document.webkitIsFullScreen is returning 'false' in Safari (correct), but 'undefined' on native iphone/ipad device

});

Answer 1

与 Mobile Safari 兼容的等效属性是 HTMLVideoElement DOM 对象上的 webkitDisplayingFullscreen 属性。