HTML5 и встроенного видео на iPhone и iPad/Обозреватель


Я создал видеоплеер HTML5 (очень простой), который отлично работает на iPad и браузере.

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

Это означает, что я теряю доступ к своим пользовательским элементам управления и отслеживанию времени (написанным на Javascript), так как видео теперь работает изолированно.

есть ли способ переопределить контроль Apple над HTML5 Видео на iphone и заставить его работать, как на ipad?

Ура

8 77

8 ответов:

право

Я никуда не собирался с этим и подал ошибку с Apple.

Итак, в конце концов, вот как это выглядит:

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

и все работает просто отлично :)

надеюсь, это поможет кому-то, так как это практически недокументировано, и единственное место, где я мог найти ссылку на "webkit-playsinline", было в ссылке iAds, где говорится: "iAds JS only".

пока iOS Safari не реализует встроенную поддержку видео, вам нужно написать видеодекодер на поддерживаемом веб-языке. Существуют существующие реализации видеодекодеров, такие как Бродвей для H. 264 (видео), jsmpeg для mpeg1, и ogv.js (видео и звука).

имейте в виду, что процесс декодирования видео вычислительно тяжелых. Ожидайте относительно медленный FPS (±20).

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

В iOS 10+

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

<video src="file.mp4" playsinline>

в iOS 8 и iOS 9

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

можно использовать iphone-inline-video чтобы позаботиться о воспроизведении и синхронизации звука (если таковые имеются), и он сохраняет <video> работает должен.

У вас есть приложение, созданное или это для мобильного сафари? Если у вас есть приложение и вы используете UIWebView, вы должны установить свойство allowsInlineMediaPlayback UIWebView..

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

webview.allowsInlineMediaPlayback = YES;

тогда нам придется использовать хаки для того же поведения.

вы можете проверить проект здесь:https://github.com/newshorts/InlineVideo чтобы увидеть, если это соответствует вашим потребностям.

в iOS 10 добавление атрибута ' playsinline 'к тегу видео HTML5 не препятствовало полноэкранному воспроизведению на iPhone UIWebview, пока я также не добавил атрибут' controls'. Вот как я получил это работает:

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

С, конечно, _webView.allowsInlineMediaPlayback=YES; в ViewController также.

просто добавьте следующее в свою конфигурацию.XML: <preference name="AllowInlineMediaPlayback" value="true" /> В противном случае UIWebView будет игнорировать атрибут webkit-playsinline.

вы можете легко разрешить это, добавив это в свою конфигурацию.XML: Затем UIWebView должен уважать атрибут webkit-playsinline.