У меня есть приложение, которое требует обновления страницы при изменении ориентации (ipad / iphone). В этом приложении HTML5-видео также представлены в определенное время в UX. Всякий раз, когда пользователь просматривает видео в полноэкранном режиме, его первая склонность - повернуть устройство в альбомную ориентацию, если оно еще не было в этом режиме. Однако, когда они это делают, это вызывает неприятную перезагрузку страницы, фактически заканчивая сеанс просмотра. Подключившись к полноэкранному API Webkit, я смог написать логику для управления этим поведением, которое отлично работает на рабочем столе Safari, а также с выбранным в инструментах разработчика пользовательским агентом iPad / iPhone, но он НЕ работает на родном iphone / ipad. .
document.webkitIsFullScreen правильно возвращает значение false / true в консоли в Safari, но на 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
});