ipad / iphone上的webkitIsFullScreen？

问题描述

我的应用程序需要在方向更改时刷新页面（ipad / iphone）。在此应用程序中，HTML5视频也会在UX中的某些时间呈现。每当用户以全屏模式观看视频时，他们的第一个倾向是如果设备尚未处于该模式，则将设备旋转到横向。但是，当他们这样做时，它会触发令人讨厌的页面重新加载，从而有效地结束他们的查看会话。通过使用webkit全屏API，我能够编写逻辑来控制这种行为，这在Safari桌面上以及在开发人员工具中选择的iPad / iPhone用户代理上都能很好地工作，但它不适用于原生iphone / ipad 。

I have an application that requires a page refresh whenever the orientation changes (ipad/iphone). Within this application, HTML5 videos also gets presented at certain times in UX. Whenever a user is viewing a video in full screen mode, their first inclination is to rotate the device to landscape orientation if it was not already in that mode. When they do this, however, it triggers the nasty page reload, effectively ending their viewing session. By tapping into webkit full screen API I was able to write logic to control this behavior, which works perfectly on Safari desktop as well as with the iPad/iPhone user agent selected in developer tools, but it DOES NOT work on the native iphone/ipad.

document.webkitIsFullScreen在Safari的控制台中正确返回false / true，但在iphone / ipad上显示为未定义。任何人都可以告诉我如何在ipad / iphone上实现这一点，因为这些是唯一需要此功能的设备吗？或者我有一个更简单的解决方案吗？非常感谢任何帮助！

document.webkitIsFullScreen returns false/true correctly in console in Safari, but comes up as undefined on iphone/ipad. Can anyone tell me how to accomplish this on ipad/iphone, since these are the only devices that require this functionality anyway? Or is there a much simpler solution that I am overlooking? Any help is greatly appreciated!

$(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

});

推荐答案

与Mobile Safari兼容的等效属性是属性。

The equivalent property which is compatible with Mobile Safari is the webkitDisplayingFullscreen property on the HTMLVideoElement DOM object.

这篇关于ipad / iphone上的webkitIsFullScreen？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！