У меня есть видео, встроенное на веб-сайт и похожее на поведение приложения youtube для перехода на полноэкранный режим в ландшафтном режиме. Я хотел сделать это с помощью javascript. Я знаю, что вы не можете использовать полноэкранный api без нажатия кнопки из соображений безопасности, и вы не можете заставить скрывать адресную строку, но нет ли обходного пути для этого?
Я нашел эту статью и попытался запустить функцию scrolldown при изменении ориентации, но это не сработало. Я также изменил переменные на более высокий тайм-аут и нижнюю позицию, а также попробовал другую функцию прокрутки:
$('html, body').animate({scrollTop: 100}, 100);
Еще никакого эффекта...
Это код:
Функция изменения ориентации Javascript:
updateOrientation: function() {
orientation = $(window).width() / $(window ).height() < 1 ? 'portrait' : 'landscape';
var device_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
device_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
new_width,
new_height;
if(orientation === 'landscape'){
new_width = device_width;
new_height = device_height;
if($('#videoPlayer').length > 0 && $(window).scrollTop() < 50){
$('html, body').animate({scrollTop: 100}, 100); //this should hide the address bar
}
}else{
//code when switching back to portrait
...
}
$('#videoPlayer').css({
'width': new_width,
'height': new_height
});
}
CSS:
@media screen and (orientation:landscape){
article #videoPlayer{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height:100vh;
}
article #videoPlayer{
background-color: #000;
}
video {
object-fit: contain;
}
body.player_initialized #sticky_navigation{
display: none;
}
}
Я проверил несколько записей Stackoverflow, но не нашел рабочего решения. Кто-нибудь знает ответ на это или имеет намек?
Изменить. Обходной путь scrolldown, похоже, работает для мобильного IOS Safari, но не для мобильного Chrome.
Существует API ориентации экрана и полноэкранный API, который может работать рука об руку. Он не поддерживается Safari, но работает в большинстве Android-браузеров:
if('orientation' in screen){
window.screen.orientation.onchange = function() {
if (this.type.startsWith('landscape') && document.querySelector('#element').webkitRequestFullScreen) {
document.querySelector('#element').webkitRequestFullscreen();
} else {
if(document.webkitCancelFullScreen){
document.webkitExitFullscreen();
}
}
}
}