Обнаруживать, разрешает ли клиент встроенное воспроизведение мультимедиа для видео HTML5

Ответ 1

В iOS10 теперь вы можете включить видеоролик, если к тегу видео добавлен атрибут playsinline.

Вы можете обнаружить это с помощью ('playsInline' in document.createElement('video')).

Однако этого недостаточно, потому что этого не будет в настольных браузерах, где явно играет встроенная стандартная функция.

Итак, это то, с чем я столкнулся: если не iPhone/iPad, мы просто предполагаем, что видео может воспроизводиться inline (это может не работать для определенных устройств Android). В противном случае выполните тест выше, чтобы проверить iOS10

Вот мой тест Modernizr.

        Modernizr.addTest('inpagevideo', function ()
        {
            return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
        });

Ответ 2

В то время как в документе iOS-Specific Questions говорится:

В настоящее время Safari оптимизирует видеопрезентацию для меньшего экрана на iPhone или iPod touch, воспроизводя видео с помощью полноэкранного видео элементы управления отображаются при касании экрана, а видео масштабируется до установите экран в портретном или альбомном режиме. Видео не представлено на веб-странице. Атрибуты высоты и ширины влияют только на пространство, выделенное на веб-странице, и атрибут элементов управления игнорируется. Это справедливо только для Safari на устройствах с маленькими экранами. В Mac OS X, Windows и iPad, Safari воспроизводит видеоролик, встроенный в веб-страницы.

IOS

var videoIsFullscreen = screen.width < 320 &&
                        navigator.userAgent.indexOf("Safari") > -1 &&
                        navigator.userAgent.indexOf("Chrome") == -1 &&
                        navigator.userAgent.match(/(iPhone|iPod)/);

Обратите внимание, что im не уверен, что маленький экран имеет 320 пикселей, вы должны настроить это значение.

ИЗМЕНИТЬ

Взгляните на этот пост.

Резюмируя:

var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;

В конце концов, я нашел этот пост, который может вам помочь.

Могу ли я избежать встроенного полноэкранного видеопроигрывателя с HTML5 на iPhone или Android?

ANDROID

Как играть в встроенное видео html5 в Android-браузере

Обратите внимание, что для собственного Android-браузера не для Android Chrome.

Ответ 3

Начиная с версии iOS 10 полноэкранный просмотр видео будет доступен и для телефонов, добавляя атрибут playsinline к элементу видео.

Для более ранних версий webkit-playsinline можно использовать, но это будет соблюдаться только на iPhone, когда страница привязана к главному экрану.

<video webkit-playsinline playsinline></video>

Чтобы определить, доступно ли встроенное воспроизведение canplay, можно использовать прослушиватель событий, чтобы проверить, находится ли видео в полноэкранном режиме. Если телефон не поддерживает встроенное воспроизведение, при запуске воспроизведения он переходит в полноэкранный режим.

var inlinePlaybackSupported = true;
var elem = document.querySelector('video');

elem.addEventListener('canplay', function () {

    //if in fullscreen here, then inline playback is not supported;
    if (elem.webkitDisplayingFullscreen) {
        inlinePlaybackSupported = false;
    }
});

Ответ 4

Решение, которое я использую, следующее:

var video = document.createElement( 'video' );
...
video.addEventListener( 'playing', function () {
  // Note: we are adding event listener for 'playing' event, not for 'play' event!
  if ( video.webkitDisplayingFullscreen ) {
    console.log( 'Inline playback is not supported' );
  } else {
    console.log( 'Inline playback is supported' );
  }
}, false );

Теперь есть очевидная проблема с этим aproach: вы не знаете, поддерживается ли встроенная линия или нет, пока не начнется воспроизведение видео. Кроме того, событие может срабатывать несколько раз, если пользователь приостанавливает видео (не проблема, но вы должны быть осторожны).

Я тестировал это на iPod touch, iPhone, iPad, Nexus 5 и Htc One X. Он дает правильные результаты во всех этих действиях.

Я не знаю, будет ли он работать на устройствах Android, которые будут воспроизводить видео в полноэкранном режиме по умолчанию. Лично я никогда не видел устройство Android, которое воспроизводит видео в полноэкранном режиме. Но запуск моего метода на nexus 5 дает интересное сообщение журнала консоли:

'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.

Поэтому я предполагаю, что для android вам нужно будет использовать что-то вроде этого:

video.addEventListener( 'webkitfullscreenchange', function ( e ) {
    if ( document.webkitIsFullScreen ) {
        console.log( 'Inline playback is not supported' );
    } else {
        console.log( 'Inline playback is supported' );
    }
}, false );

но лично, Я никогда не видел, чтобы это событие было запущено. Ни на Android, ни на iOS.

Некоторые другие вещи, которые я тестировал на нескольких устройствах iOS, НЕ РАБОТАЕТ:

• свойство video.webkitSupportsFullscreen - всегда возвращает false
• events 'webkitendfullscreen' и 'webkitenterfullscreen' - это смешные - webkitendfullscreen работает отлично, но webkitenterfullscreen никогда не запускается

ДОБАВЛЕНО:

Мне действительно удалось найти Android-устройство, которое отображает только видео в полноэкранном режиме (Fly IQ245 Plus). Хотя его поведение очень похоже на поведение iOS, я не смог обнаружить полноэкранное изменение любыми способами, упомянутыми выше.