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

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

113 голосов
/ 20 февраля 2011

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

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

Ответы [ 6 ]

61 голосов
/ 01 апреля 2016

В iOS 10 +

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

<video src="file.mp4" playsinline>

В iOS 8 и iOS 9

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

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

51 голосов
/ 20 февраля 2011

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

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

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

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

40 голосов
/ 23 января 2014

Вот ссылка для разработчиков Apple, которая явно говорит, что -

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

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

СЕЙЧАС :

  • Атрибут webkit-playsinline работает для видео HTML5 на iOS, но только при сохранении веб-страницы на домашнем экране в качестве веб-приложения - Нет, если страница открыта в Safari
  • Для нативного приложения с WebView (или гибридного приложения с HTML, CSS, JS) UIWebView позволяет воспроизводить встроенное видео, но только если вы устанавливаете свойство allowsInlineMediaPlayback для класс UIWebView в true
15 голосов
/ 20 августа 2016

В iOS 10 beta 4. Правильный код в HTML5 - 

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

webkit-playsinline для iOS <10, а <code>playsinline для iOS> = 10

Подробнее через https://webkit.org/blog/6784/new-video-policies-for-ios/

11 голосов
/ 05 мая 2011

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

9 голосов
/ 20 февраля 2011

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

...