我有一个应用程序,每当方向改变时都需要刷新页面(ipad/iphone)。在此应用程序中,HTML5视频也会在特定时间以用户体验的形式呈现。每当用户在全屏模式下观看视频时,他们的第一个倾向是将设备旋转到横向(如果尚未处于该模式)。然而,当他们这样做时,它会触发令人讨厌的页面重新加载,有效地结束他们的查看会话。通过点击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
});
发布于 2011-10-26 07:40:58
与Mobile Safari兼容的等效属性是HTMLVideoElement
DOM对象上的webkitDisplayingFullscreen
属性。
https://stackoverflow.com/questions/7897018
复制相似问题