Czy mogę uniknąć natywnego pełnoekranowego odtwarzacza wideo z HTML5 na iPhonie lub Androidzie?

132

Stworzyłem aplikację internetową, która używa tagu HTML5 i kodu JavaScript, który renderuje inne treści zsynchronizowane z uruchomionym wideo. Działa świetnie w przeglądarkach stacjonarnych: Firefox, Chrome i Safari. Na iPhonie lub DroidX rodzimy odtwarzacz wideo pojawia się i przejmuje ekran, zasłaniając w ten sposób inne dynamiczne treści, które chcę wyświetlać jednocześnie z wideo.

Czy można to obejść? W razie potrzeby wymyślę, jak pisać aplikacje natywne dla obu tych platform, ale zaoszczędziłoby mi mnóstwo wysiłku, gdybym mógł po prostu trzymać się HTML5 / JavaScript.

iphone android html video fullscreen AlpineCarver
źródło
1
Właściwie implementacje odtwarzaczy A / V w przeglądarkach zarówno na iOS, jak i na Androidzie są cholernie błędne. Wypróbuj kilku graczy na stronie lub spróbuj dodać do nich stylowe sterowanie, a zobaczysz - jest bezużyteczny. A więc prawdopodobnie zewnętrzna aplikacja pełnoekranowa do odtwarzania wideo - nie jest taka zła;)
tuxSlayer
1
Cieszę się za każdym razem, gdy urządzenia Apple renderują moje treści w zamierzony sposób. Zwykłem to celebrować.
Anders Lindén
Technicznie nie, ale jest kilka dostępnych bibliotek, które to umożliwiają, np. Iphone-inline-video (ujawnienie: napisałem to)
fregante

Odpowiedzi:

76

W iOS 10+

Firma Apple włączyła ten atrybut playsinlinewe wszystkich przeglądarkach na iOS 10, więc działa to bezproblemowo:

<video src="file.mp4" playsinline>

W iOS 8 i iOS 9

Krótka odpowiedź: użyj iphone-inline-video , umożliwia odtwarzanie inline i synchronizuje dźwięk.

Długa odpowiedź: Można obejść ten problem poprzez symulację odtwarzanie przez szumiące wideo zamiast faktycznie .play()„ing go.

fregante
źródło
Nie działa w Captive Network Assistant (Captive Portal)
Dominik Vogt
57

Istnieje właściwość, która włącza / wyłącza odtwarzanie multimediów w linii w przeglądarce internetowej iOS (jeśli pisałeś aplikację natywną, byłaby to allowsInlineMediaPlaybackwłaściwość UIWebView). Domyślnie na iPhonie jest to ustawione NO, ale na iPadzie jest ustawione naYES .

Na szczęście dla Ciebie możesz również dostosować to zachowanie w HTML w następujący sposób:

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

... to powinno, miejmy nadzieję, rozwiązać problem. Nie wiem, czy będzie działać na Twoich urządzeniach z Androidem. Jest to własność zestawu internetowego, więc może. W każdym razie warto iść.

lxt
źródło
25
Dzieki za sugestie. Niestety, nie zmieniło to zachowania, które widzę - pełnoekranowe natywne odtwarzacze wideo pojawiają się zarówno na iPhonie, jak i DroidX.
AlpineCarver,
5
Ja też mam ten problem. Dodałem webkit-playsinline, a nawet sprawdzoną przez XML wersję webkit-playsinline = "webkit-playsinline", ale nie zmienia zachowania
mike clagg
7
Może to nie działać w Safari na iPhone'a, ponieważ widok sieciowy nie umożliwia wbudowanego odtwarzania wideo. Jeśli jednak strona internetowa jest hostowana w Twoim własnym UIWebView we własnej aplikacji, możesz ustawić te właściwości, a odtwarzanie wideo w tekście będzie możliwe: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NIE;
Willster
15
Działa to również w Cordova / PhoneGap. Po prostu dodaj do pliku config.xml w projekcie Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
3
<preference name = "AllowInlineMediaPlayback" value = "true" /> Świetnie !. działa dobrze na moim iPhonie. Wielkie dzięki.
sirius2013
42

Stara odpowiedź (obowiązuje do 2016 r.)

Oto link do programisty Apple, który wyraźnie mówi, że -

na iPhonie i iPodzie touch, które są urządzeniami z małym ekranem, „Wideo NIE jest prezentowane na stronie internetowej”

Uwagi dotyczące urządzenia Safari

Twoje opcje :

  • Te webkit-playsinlineprace atrybutów dla HTML5 video na iOS, ale tylko po zapisaniu strony internetowej do ekranu głównego jako webapp - Nie, jeśli otworzyło stronę w Safari
  • W przypadku aplikacji natywnej z WebView (lub aplikacji hybrydowej z HTML, CSS, JS) UIWebViewumożliwia odtwarzanie wideo w tekście, ale tylko wtedy, gdy ustawisz allowsInlineMediaPlaybackwłaściwość dla UIWebViewklasy na true
King Julian
źródło
1
Zobacz moje komentarze do zaakceptowanej odpowiedzi. ICYMI, dla Cordova, dodaj następujące informacje do pliku config.xml:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
Na YouTube.com gra bez przechodzenia na pełny ekran
Anthony
Odpowiedź jest stara, 2014, i mogło się zmienić. Ponadto youtube.com nie jest aplikacją natywną z WebView, jak wspomniano w odpowiedzi. Dzięki, że zauważyłeś.
King Julian
18

W iOS 10 beta 4, właściwy kod w HTML5 to

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

webkit-playsinlinejest dla iOS <10 i playsinlinejest dla iOS> = 10

Zobacz szczegóły na https://webkit.org/blog/6784/new-video-policies-for-ios/

iamhite
źródło
11

Zgodnie z tą stroną https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html jest ona dostępna tylko wtedy, gdy (Włączona tylko w UIWebView z właściwością allowInlineMediaPlayback ustawioną na TAK. ) Rozumiem, że w Mobile Safari jest to TAK na iPadzie i NIE na iPhonie i iPodzie Touch.

J z-
źródło
4
Wygląda na to, że zadziałałoby to tylko wtedy, gdyby strona odtwarzacza HTML5 była „dostępna” w natywnej aplikacji na iOS. Z pewnością nie działa na zwykłej starej stronie internetowej.
natlee75
9

Nie znam Androida, ale Safari na iPhonie lub iPodzie touch będzie odtwarzać wszystkie filmy na pełnym ekranie ze względu na mały rozmiar ekranu. Na iPadzie odtworzy wideo na stronie, ale umożliwi użytkownikowi wyświetlenie go na pełnym ekranie.

ughoavgfhw
źródło