web-dev-qa-db-ja.com

iPhoneまたはAndroidでHTML5を使用するネイティブフルスクリーンビデオプレーヤーを回避できますか？

実行中のビデオと同期する他のコンテンツをレンダリングするHTML5タグとJavaScriptコードを使用するWebアプリを構築しました。 Firefox、Chrome、Safariなどのデスクトップブラウザーで最適に動作します。 iPhoneまたはDroidXでは、ネイティブビデオプレーヤーがポップアップして画面を引き継ぐため、ビデオと同時に表示する他の動的コンテンツが見えなくなります。

これを回避する方法はありますか？必要に応じて、これら両方のプラットフォーム用のネイティブアプリの作成方法を理解しますが、HTML5/JavaScriptだけを使用できれば、多大な労力を節約できます。

iphoneandroidhtml5videofullscreen
114
AlpineCarver

IOS 10以降

Appleは、iOS 10のすべてのブラウザーで属性playsinlineを有効にしたため、これはシームレスに機能します。

<video src="file.mp4" playsinline>

IOS 8およびiOS 9

短い回答：iphone-inline-video を使用すると、インライン再生が有効になり、オーディオが同期されます。

長答：実際にではなくビデオをスキミングで再生をシミュレートすることで、この問題を回避できます.play() 'ing。

62
fregante

IOS Webブラウザーでのラインメディアの再生を有効/無効にするプロパティがあります（ネイティブアプリを記述している場合、UIWebViewのallowsInlineMediaPlaybackプロパティになります）。 iPhoneではデフォルトでNOに設定されますが、iPadではYESに設定されます。

幸いなことに、次のようにHTMLでこの動作を調整することもできます。

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

...うまくいけばあなたのためにそれを整理する必要があります。 Androidデバイスで機能するかどうかはわかりません。これはWebkitのプロパティなので、可能性があります。とにかく、行く価値があります。

51
lxt

ここに、explicitlyが言うApple開発者リンクがあります-

小さな画面デバイスであるiPhoneおよびiPod touchでは、「ビデオはNOTWebページ内に表示されます」

Safariデバイス固有の考慮事項

NOW：

  • webkit-playsinline属性は、iOSのHTML5ビデオで機能しますが、Webページをwebappとしてホーム画面に保存する場合のみ- Safariのページ
  • WebViewを備えたネイティブアプリ（またはHTML、CSS、JSを備えたハイブリッドアプリ）の場合、UIWebViewを使用してビデオをインラインで再生できますが、 allowsInlineMediaPlaybackプロパティを設定 がUIWebViewclass to true
40
KingJulian

IOS 10ベータ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/ で詳細を参照してください

15
iamhite

このページによると https://developer.Apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html （UIWebViewでのみ有効） allowInlineMediaPlaybackプロパティをYESに設定します。）Mobile Safariでは、iPadではYES、iPhoneおよびiPod TouchではNOであることを理解しています。

11
jz-

Androidについては知りませんが、iPhoneまたはiPod touchのSafariは、画面サイズが小さいため、すべてのビデオをフルスクリーンで再生します。 iPadでは、ページ上でビデオを再生しますが、ユーザーはフルスクリーンにすることができます。

9
ughoavgfhw