HTML5 встроенное видео на iPhone против iPad / браузера

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

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

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

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

Ура

77
html5 ipad iphone video

8 ответов

право

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

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

HTML-код

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

Obj-C

webview.allowsInlineMediaPlayback = YES;

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

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

103

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

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

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

11

В iOS 10+

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

<video src="file.mp4" playsinline>

в iOS 8 и iOS 9

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

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

2

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

1

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

webview.allowsInlineMediaPlayback = YES;

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

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

0

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

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

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

0

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

0

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

-1