iPhone・iPadブラウザでHTML5動画をインライン再生する方法（playsinline属性の使い方）

UIWebViewのallowsInlineMediaPlaybackプロパティとは

ネイティブアプリ内のiOSウェブブラウザ（UIWebView）には、allowsInlineMediaPlaybackというプロパティが用意されています。このプロパティは、動画をページ内でインライン再生するかどうかを有効・無効に切り替える役割を持っています。

デフォルト設定では、iPhoneではNO（無効）、iPadではYES（有効）になっています。そのため、iPhoneでは動画再生時にネイティブのフルスクリーンプレーヤーが画面全体を占有してしまい、動画と同時に他の動的なコンテンツを表示することができません。

HTML側でインライン再生を制御する方法

この挙動は、HTMLのwebkit-playsinline属性を使って調整できます。以下のようにvideoタグに属性を追加します。

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

この属性を指定することで、iPhone上でも動画がフルスクリーンに切り替わらず、ページ内でそのまま再生されるようになります。

iOS 10以降での変更点

iOS 10以降では、Appleがplaysinline属性をすべてのiOSウェブブラウザで標準サポートするようになりました。これにより、ベンダープレフィックス付きの旧属性に頼らなくても、シンプルに記述できるようになっています。

<video src="new.mp4" playsinline></video>

現在開発を行う場合は、互換性を考慮して両方の属性を併記しておくのが安全です。

<video src="new.mp4" playsinline webkit-playsinline></video>

まとめ

• UIWebViewのallowsInlineMediaPlaybackプロパティでインライン再生の可否を制御できる
• デフォルトはiPhoneが無効、iPadが有効
• iOS 10以降は標準のplaysinline属性を使用可能
• 古いiOSへの対応が必要な場合はwebkit-playsinlineも併せて指定するとよい