我有一个应用程序,只要方向改变(ipad/iphone),就需要刷新页面。在此应用程序中,HTML5 视频也会在 UX 中的特定时间呈现。每当用户在全屏模式下观看视频时,如果设备尚未处于该模式,他们的第一个倾向是将设备旋转到横向。然而,当他们这样做时,它会触发令人讨厌的页面重新加载,从而有效地结束他们的观看 session 。通过利用 webkit 全屏 API,我能够编写逻辑来控制这种行为,它可以在 Safari 桌面以及开发人员工具中选择的 iPad/iPhone 用户代理上完美运行,但它不适用于 native 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
});
Best Answer-推荐答案 strong>
与 Mobile Safari 兼容的等效属性是 webkitDisplayingFullscreen HTMLVideoElement DOM 对象的属性。
关于ios - ipad/iphone上的webkitIsFullScreen?,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/7897018/
|