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

130

Я создал веб-приложение, использующее тег HTML5 и код JavaScript, который отображает другой контент, синхронизированный с запущенным видео. Он отлично работает в настольных браузерах: Firefox, Chrome и Safari. На iPhone или DroidX встроенный видеоплеер появляется и занимает экран, тем самым скрывая другой динамический контент, который я хочу отображать одновременно с видео.

Есть ли способ обойти это? При необходимости я выясню, как писать собственные приложения для обеих этих платформ, но я бы сэкономил массу усилий, если бы я мог просто придерживаться HTML5 / JavaScript.

iphone android html video fullscreen AlpineCarver
источник
1
Фактически, браузерные реализации аудио / видео плееров как на iOS, так и на Android чертовски содержат ошибки. Попробуйте несколько плееров на странице или попробуйте добавить к ним стильное управление, и вы увидите - его нельзя использовать. Так что, вероятно, внешнее полноэкранное приложение для воспроизведения видео - не так уж и плохо;)
tuxSlayer
1
Я счастлив каждый раз, когда устройства Apple отображают мой контент должным образом. Я обычно это отмечаю.
Андерс Линден,
Технически нет, но есть пара доступных библиотек, которые делают это возможным, например iphone-inline-video (раскрытие: это я написал)
fregante 01

Ответы:

74

В iOS 10+

Apple включила атрибут playsinlineво всех браузерах на iOS 10, поэтому он работает без проблем:

<video src="file.mp4" playsinline>

В iOS 8 и iOS 9

Краткий ответ: используйте iphone-inline-video , он включает встроенное воспроизведение и синхронизирует звук.

Длинный ответ: эту проблему можно обойти, смоделировав воспроизведение путем беглого просмотра видео, а не его реального просмотра .play().

fregante
источник
Он не работает в Captive Network Assistant (Captive Portal)
Доминик Фогт
54

Существует свойство, которое включает / отключает прямое воспроизведение мультимедиа в веб-браузере iOS (если вы писали собственное приложение, это было бы allowsInlineMediaPlaybackсвойством UIWebView). По умолчанию на iPhone установлено значение NO, но на iPad установлено значение YES.

К счастью для вас, вы также можете настроить это поведение в HTML следующим образом:

<video id="myVideo" width="280" height="140" webkit-playsinline>

... надеюсь, это поможет вам разобраться. Я не знаю, будет ли это работать на ваших устройствах Android. Это свойство webkit, так что может. В любом случае, стоит попробовать.

LXT
источник
25
Спасибо за предложение. К сожалению, это не изменило поведение, которое я наблюдаю - полноэкранные собственные видеоплееры появляются как на iPhone, так и на DroidX.
AlpineCarver
5
У меня тоже есть эта проблема. Я добавил webkit-playsinline и даже проверенную xml версию webkit-playsinline = "webkit-playsinline", но не изменил поведения,
Майк Клагг
7
Это может не работать в Safari для iPhone, поскольку веб-просмотр не позволяет воспроизводить встроенное видео. Однако, если веб-страница размещена в вашем собственном UIWebView в вашем собственном приложении, вы можете установить эти свойства, и будет возможно встроенное воспроизведение видео: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = НЕТ;
Willster 03
14
Это работает и в Cordova / PhoneGap. Просто добавьте следующее в свой config.xml в проекте Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Мистер Т.А.
3
<preference name = "AllowInlineMediaPlayback" value = "true" /> Отлично !. он отлично работает на моем iPhone. Большое спасибо.
sirius2013
41

Старый ответ (актуален до 2016 г.)

Вот ссылка разработчика Apple, в которой прямо говорится, что -

на iPhone и iPod touch, которые имеют небольшой экран, «Видео НЕ отображается на веб-странице»

Особенности устройства Safari

Ваши варианты :

  • В webkit-playsinlineатрибут работы для HTML5 видео на прошивкой , но только при сохранении веб - страницы на главном экране в качестве веб - приложение - Не при открытии страницы в Safari
  • Для родного приложения с WebView (или гибридного приложения с HTML, CSS, JS) UIWebViewпозволяет воспроизводить видео в линию, но только если вы установите allowsInlineMediaPlaybackсвойство для UIWebViewкласса верно
KingJulian
источник
1
Смотрите мои комментарии к принятому ответу. ICYMI, для Кордовы, добавьте в свой config.xml следующее:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
На YouTube.com он воспроизводится без перехода в полноэкранный режим
Энтони,
Ответ старый, 2014 год, и все могло измениться. Кроме того, youtube.com не является собственным приложением с WebView, как упоминалось в ответе. Спасибо, что заметили.
KingJulian
11

Согласно этой странице https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html, он доступен только в том случае, если (Включено только в UIWebView со свойством allowInlineMediaPlayback, установленным на YES. ) Я понимаю, что в Mobile Safari это ДА на iPad и НЕТ на iPhone и iPod Touch.

JZ-
источник
4
Похоже, это сработает только в том случае, если вы настраиваете страницу проигрывателя HTML5, чтобы «жить в» родном приложении iOS. Это определенно не работает на простой веб-странице.
natlee75
9

Я не знаю насчет Android, но Safari на iPhone или iPod touch будет воспроизводить все видео в полноэкранном режиме из-за небольшого размера экрана. На iPad он будет воспроизводить видео на странице, но позволяет пользователю сделать его полноэкранным.

ughoavgfhw
источник