Bisakah saya menghindari pemutar video layar penuh asli dengan HTML5 di iPhone atau android?

130

Saya telah membangun aplikasi web yang menggunakan tag HTML5 dan kode JavaScript yang membuat konten lain disinkronkan dengan video yang sedang berjalan. Ini berfungsi dengan baik di browser desktop: Firefox, Chrome, dan Safari. Pada iPhone atau DroidX, pemutar video asli muncul dan mengambil alih layar, sehingga mengaburkan konten dinamis lainnya yang ingin saya tampilkan secara bersamaan dengan video.

Apakah ada cara untuk mengatasi ini? Jika perlu, saya akan mencari cara menulis aplikasi asli untuk kedua platform tersebut, tetapi itu akan menghemat banyak upaya jika saya bisa tetap menggunakan HTML5 / JavaScript.

iphone android html video fullscreen AlpineCarver
sumber
1
Sebenarnya, implementasi browser dari pemain a / v di ios dan android buggy seperti neraka. Coba beberapa pemain di halaman atau cobalah untuk menambahkan kontrol penuh gaya ke mereka dan Anda akan melihat - itu tidak dapat digunakan. Jadi, mungkin aplikasi layar penuh eksternal untuk memutar video - tidak terlalu buruk;)
tuxSlayer
1
Saya senang setiap kali perangkat apel membuat konten saya dengan cara yang dimaksudkan. Saya biasa merayakannya.
Anders Lindén
Secara teknis tidak, tetapi ada beberapa perpustakaan tersedia yang memungkinkan, seperti iphone-inline-video (pengungkapan: Saya menulisnya)
fregante

Jawaban:

74

Di iOS 10+

Apple mengaktifkan atribut playsinlinedi semua browser di iOS 10, jadi ini berfungsi dengan mulus:

<video src="file.mp4" playsinline>

Di iOS 8 dan iOS 9

Jawaban singkat: gunakan iphone-inline-video , ini memungkinkan pemutaran inline dan menyinkronkan audio.

Jawaban panjang: Anda dapat mengatasi masalah ini dengan mensimulasikan pemutaran dengan membaca sekilas video alih-alih benar-benar .play()melakukannya.

fregante
sumber
Ini tidak berfungsi di Captive Network Assistant (Captive Portal)
Dominik Vogt
54

Ada properti yang mengaktifkan / menonaktifkan pemutaran media online di browser web iOS (jika Anda menulis aplikasi asli, itu akan menjadi allowsInlineMediaPlaybackproperti dari UIWebView). Secara default pada iPhone ini diatur ke NO, tetapi pada iPad itu diatur ke YES.

Untungnya bagi Anda, Anda juga dapat menyesuaikan perilaku ini dalam HTML sebagai berikut:

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

... semoga itu bisa menyelesaikannya untukmu. Saya tidak tahu apakah itu akan berfungsi pada perangkat Android Anda. Ini properti webkit, jadi mungkin saja. Layak untuk dicoba.

lxt
sumber
25
Terima kasih untuk sarannya. Sayangnya, itu tidak mengubah perilaku yang saya lihat - pemutar video asli layar penuh muncul di iPhone dan DroidX.
AlpineCarver
5
Saya juga mengalami masalah ini. Saya telah menambahkan webkit-playsinline dan bahkan versi xml yang divalidasi dari webkit-playsinline = "webkit-playsinline", tetapi tidak mengubah perilaku
mike clagg
7
Ini mungkin tidak berfungsi di Safari untuk iPhone karena tampilan web tidak memungkinkan pemutaran video inline. Namun, jika halaman web di-host di dalam UIWebView Anda sendiri di dalam aplikasi Anda sendiri, Anda dapat mengatur properti ini dan pemutaran video inline akan dimungkinkan: webview.allowsInlineMediaPlayback = YA; webview.mediaPlaybackRequiresUserAction = TIDAK;
Willster
14
Ini juga berfungsi di Cordova / PhoneGap. Cukup tambahkan berikut ini ke config.xml Anda dalam proyek Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Tn. TA
3
<preferensi nama = "AllowInlineMediaPlayback" value = "true" /> Hebat !. berfungsi dengan baik di iPhone saya. Terima kasih banyak.
sirius2013
41

Jawaban lama (berlaku hingga 2016)

Berikut ini tautan pengembang Apple yang secara eksplisit mengatakan bahwa -

pada iPhone dan iPod touch, yang merupakan perangkat layar kecil, "Video TIDAK disajikan dalam Halaman Web"

Pertimbangan Khusus Perangkat Safari

Pilihan Anda :

  • The webkit-playsinlineatribut bekerja untuk video HTML5 di iOS, tetapi hanya bila Anda menyimpan halaman web ke layar rumah Anda sebagai webapp - Tidak jika dibuka halaman di Safari
  • Untuk aplikasi asli dengan WebView (atau aplikasi hybrid dengan HTML, CSS, JS) UIWebViewmemungkinkan untuk memutar inline video, tetapi hanya jika Anda mengatur allowsInlineMediaPlaybackproperti untuk UIWebViewkelas menjadi true
KingJulian
sumber
1
Lihat komentar saya untuk jawaban yang diterima. ICYMI, untuk Cordova, tambahkan yang berikut ini ke config.xml Anda:<preference name="AllowInlineMediaPlayback" value="true" />
Tn. TA
Di YouTube.com diputar tanpa layar penuh
Anthony
Jawabannya sudah tua, 2014, dan banyak hal mungkin telah berubah. Juga, youtube.com bukan aplikasi asli dengan WebView sebagaimana disebutkan dalam jawabannya. Terima kasih telah memperhatikannya.
KingJulian
18

Di iOS 10 beta 4.Kode yang tepat dalam HTML5 adalah

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

webkit-playsinlineuntuk iOS <10, dan playsinlineuntuk iOS> = 10

Lihat detail melalui https://webkit.org/blog/6784/new-video-policies-for-ios/

iamhite
sumber
11

Menurut halaman ini https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html hanya tersedia jika (Diaktifkan hanya di UIWebView dengan properti allowInlineMediaPlayback diatur ke YES. ) Saya mengerti di Mobile Safari ini YA di iPad dan TIDAK di iPhone dan iPod Touch.

jz-
sumber
4
Sepertinya ini hanya akan berfungsi jika Anda menyiapkan halaman pemutar HTML5 untuk "tinggal di dalam" aplikasi iOS asli. Ini tentu saja tidak bekerja pada halaman web biasa.
natlee75
9

Saya tidak tahu tentang Android, tetapi Safari di iPhone atau iPod touch akan memutar semua video layar penuh karena ukuran layar yang kecil. Di iPad itu akan memutar video di halaman tetapi memungkinkan pengguna untuk membuatnya layar penuh.

ughoavgfhw
sumber