先日、videoタグで設置している動画が、iPhoneでのみ表示できないという問題に遭遇しました。MacbookやiPadのSafariでは再生できており、iPhoneだけ動画の部分が真っ白になってしまうという現象です。
結果的に属性を1つ追加するだけで解決しましたので、備忘録として残しておきたいと思います。
videoタグによる埋め込み動画がiPhoneだけ表示されない時の対処法
iPhoneでvideoタグの動画が表示されない時は、playsinline属性をvideoタグに追加してあげます。以下のような感じです。
<video poster="example.jpg" preload="none" muted autoplay loop playsinline>
<source src="example.mp4">
</video>
<video src="example.mp4" muted autoplay loop playsinline></video>playsinline属性については、MDNによると以下のように説明されています。
論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。
MDN
いまいちわかりませんが、インラインによる埋め込み動画の再生を許可するための属性ということでしょうか。
なお、playsinline属性を追加しても解決しない場合は、動画側に問題があるかもしれません。その場合は、mp4に限定した話ですが、「【HTML5】iOSのSafariでvideoタグ埋め込みのmp4が再生できないのはインターレースだから」という記事が参考になるかもしれません。
あとがき
iPhoneへの対応は必須かと思いますので、videoタグを使う場合はplaysinline属性を入れておいた方が良いですね。
それにしても、動画周りは結構やっかいですね…なんとか解決できてよかったです。