130

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

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

— 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

18

В iOS 10 beta 4 правильный код в HTML5:

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinlineдля iOS <10 и playsinlineдля iOS> = 10

См. Подробности на https://webkit.org/blog/6784/new-video-policies-for-ios/

— iamhite
источник

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
источник

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

В iOS 10+

В iOS 8 и iOS 9