Полноэкранное видео html5 с веб-браузером iOS Safari

Есть ли способ запустить полноэкранный режим в iOS Safari (мобильный Интернет). Либо полноэкранный, либо полноэкранный режим просмотра было бы здорово. Вот что я пробовал ниже:

<video id="mobile_content"> 
  <source src="someurltocontent"></source>
</video>


function makefullscreen(element){
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } 
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } 
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } 
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    else{
        var requestFullscreen = 
                document.documentElement.requestFullscreen ||
                document.documentElement.webkitRequestFullscreen ||
                document.documentElement.mozRequestFullscreen ||
                document.documentElement.requestFullScreen ||
                document.documentElement.webkitRequestFullScreen ||
                    document.documentElement.mozRequestFullScreen;

        if (requestFullscreen) {
           requestFullscreen.call(document.documentElement);
        } 
        else {
           console.log("really!? come on...");
        }
    }
}

По действию пользователя вышеупомянутая функция передает элемент видео, и если полноэкранный режим доступен, то полноэкранный режим выполняется для элемента видео.

Это не работает в Safari для IPAD.

Одним из обходных путей может быть применение элемента управления attr к тегу видео, а затем позволить пользователю инициировать полноэкранный режим с помощью собственного полноэкранного режима проигрывателя.

<video id="mobile_content" controls> 
     <source src="someurltocontent"></source>
</video>

Любые идеи, кроме вышеупомянутых?


javascript mobile-safari fullscreen html5-fullscreen
person Fabii    schedule 05.03.2015    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Вы можете легко активировать полноэкранный режим для элемента Media DOM (например, video) в Safari для iPad, используя следующий код:

HTML

<div id="video-container">
    <video> 
        <source src="path/to/file.webm"></source>
        <source src="path/to/file.mp4"></source>
    </video>
</div>

JavaScript

var videoContainer = document.getElementById('video-container');
var video          = videoContainer.getElementsByTagName('video');

function toggleVideoFullscreen() {

    if (video.webkitEnterFullScreen) {
        // Toggle fullscreen in Safari for iPad
        video.webkitEnterFullScreen();
    } else {
        // Toggle fullscreen for other OS / Devices / Browsers 
    }
}

Однако этот метод работает только для элементов Media DOM в Safari для iPad, и у меня всегда возникают проблемы с запросом полноэкранного режима на другом элементе DOM, таком как div, section и т. д.

Кажется, что webkitRequestFullscreen всегда возвращает undefined для каждого элемента DOM в Safari для iPad.

Хорошего дня !

person Théo Kleman    schedule 22.08.2016

arrow_upward
0
arrow_downward

Привет всем, кто заинтересован. Я провел пару дней, изучая лучший способ работы с полноэкранными видео с учетом кросс-браузерной совместимости.

Есть 3 подхода:

1. Как и в Netflix, вместо воспроизведения видео вы перенаправляете пользователя в магазин приложений.

2- Вы можете эмулировать полноэкранный режим, используя свойство playsinline, которое позволит избежать запуска собственных элементов управления в мобильной IOS, а при ширине 100% это выглядит так, как будто видео полноэкранное.

3- Третий подход аналогичен принятому ответу, но включает способ обнаружения запуска полноэкранного режима и управления выходом из полноэкранного режима.

По сути, вы должны сделать оболочку вокруг видео, я получаю ссылку с помощью useRef() (реагировать), и вы запускаете полноэкранный API (когда это возможно) в оболочке.

Но в последнем случае, в последнем случае (где IOS Mobile не поддерживается) вы вызовете другой метод.

Хорошо, вот код!!

const video = document.getElementsByTagName('video')[0];
const isInFullScreen =
    (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);
  if (!isInFullScreen) {
    if (playerWrapper.current.requestFullScreen) {
      // W3C API
      playerWrapper.current.requestFullScreen();
    } else if (playerWrapper.current.mozRequestFullScreen) {
      // Mozilla current API
      playerWrapper.current.mozRequestFullScreen();
    } else if (playerWrapper.current.webkitRequestFullScreen) {
      // Webkit current API
      playerWrapper.current.webkitRequestFullScreen();
    } else if (video.webkitEnterFullScreen) {
      // This is the IOS Mobile edge case
      video.webkitEnterFullScreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
person Carlos Mori    schedule 16.07.2021