iPhone等のスマホで<video>タグの動画が表示されない場合の対処法

HTML5では<video>タグを使うことで、WEBサイトに動画を埋め込むことが出来ます。ただ、記述方法に気を付けないと、WindowsやAndroidスマホでは表示されても、iPhoneやiPadなどでは動画が表示されない、という現象が発生してしまいます。

日本では、スマホでのiPhoneのシェアはかなりのものになりますので、iPhoneやiPadで意図せずに動画が表示されないのは困りますよね。そんなわけで、<video>タグの動画が表示されない時の対処法になります。

動画の形式はmp4がおすすめ

まず、<video>タグで埋め込む動画の形式は「mp4」が良いかと思います。というのもGoogle ChromeやEdge、FirefoxやSafariといった主要ブラウザのほとんどが、mp4の動画形式に対応しているからです。

またmp4は高圧縮で動画を保存できるので、ファイルの容量を抑えつつ、WEBサイトに埋め込むのに適しています。

iPhoneやiPadにはplaysinline 属性が必須

<video>タグで動画を表示させる際には以下のように記述します。

playsinline：動画をインラインで再生するように指定
autoplay：動画を自動再生させる
muted：動画の音を消音にする
loop：動画を自動再生させる

スマホで動画を自動再生させるには、「autoplay」と「muted」属性が必須になります。またiPhoneやiPadで動画が表示させる為には「playsinline」属性が必須になります。つまり、スマホで動画を自動再生させたい場合には「playsinline autoplay muted」属性を入れる必要があります。

まとめ

スマホでは、動画の扱いが色々と異なっているので注意が必要ですね。スマホで動画が自動再生されない場合にはvideoタグに「autoplay」と「muted」を入れましょう。iPhoneやiPadで動画が表示されない場合にはvideoタグに「playsinline」を入れましょう。

関連記事