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

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

iOS 10以降

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

<video src="file.mp4" playsinline>

iOS 8およびiOS 9の場合

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

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

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

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

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

...うまくいけば、あなたのためにそれを整理するはずです。お使いのAndroidデバイスで動作するかどうかはわかりません。これはwebkitプロパティなので、そうかもしれません。とにかく、行く価値があります。

古い回答（2016年まで適用可能）

これは明示的にそれを言うApple開発者リンクです-

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

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

あなたのオプション：

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

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/で詳細をご覧ください

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

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