130

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

Чи є спосіб обходити це? Якщо потрібно, я розгадаю, як написати нативну програму для обох цих платформ, але це дозволить заощадити багато зусиль, якби я міг просто дотримуватися HTML5 / JavaScript.

— AlpineCarver
джерело

1

Насправді, браузерні впровадження a / v-плеєрів як у ios, так і в android є глючними, як у пеклі. Спробуйте кілька гравців на сторінці або спробуйте додати до них стильні елементи керування, і ви побачите - його непридатне. Тож, напевно, зовнішній полноекранний додаток для відтворення відео - не так вже й погано;)

— tuxSlayer

1

Я щасливий щоразу, коли пристрої Apple видають мій вміст задуманим чином. Я використовую для святкування цього.

— Андерс Лінден

Технічно немає, але є кілька бібліотек, які роблять це можливим, як iphone-inline-video (розкриття: я це написав)

— fregante

74

В iOS 10+

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

<video src="file.mp4" playsinline>

В iOS 8 та iOS 9

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

Довга відповідь: Ви можете подолати цю проблему, імітуючи відтворення, знімаючи відео, а не насправді .play().

— fregante
джерело

Це не працює в помічнику мережевих полонених (Портативний портал)

— Домінік Вогт

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 = ТАК; webview.mediaPlaybackRequiresUserAction = НІ;

— Уіллстер

14

Це працює і в Кордові / 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класу вірно

— КінгДжуліан
джерело

1

Дивіться мої коментарі до прийнятої відповіді. ICYMI, для Кордови, додайте у свою config.xml наступне:<preference name="AllowInlineMediaPlayback" value="true" />

— Містер Т.А.,

На 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/

— яаміте
джерело

11

Відповідно до цієї сторінки https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html вона доступна лише в тому випадку, коли (Увімкнено лише в UIWebView з властивістю enableInlineMediaPlayback, встановленою YES. ) Я розумію, що в мобільному 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