videoタグのつまずき/スマホで再生されない/playsinlineの存在

videoタグ/動画埋め込みでつまずいた

もくじ
  1. 私がつまずいたNG例
  2. 自動再生する時の必須条件
  3. playsinlineの重要性

私がやりたかったのは、「自動再生、ループ」この2点。
なので、以下のようにしました。

NG例

<video autoplay loop>
<source src=".../●●●.mp4" type="video/mp4">
<img src=".../■■■.png">
</video>

プレビューした結果が…

・Chromeで再生しない(スマホもPCも)
・スマホで再生しない(というか、表示されない!)
・レスポンシブしない(メディアクエリが効いてない?)

自動再生するなら、ミュートは必須/autoplayとmutedはセット

まず、Chrome、スマホで再生されないのは「muted属性」が抜けていたため。
今回埋め込みのため用意した動画はそもそも音がないものだったので、気にしていなかったのですが、これをつけるだけで、「Chrome、スマホで再生されない」は解決。

この問題の原因は「autoplay属性」iOSのSafariやAndroidなどのChromeでは「音声を鳴らさない」という条件の元で「autoplay属性」が有効。

つまり「自動再生させたいなら、ミュートは必須」ということでした。

メディアクエリが効かない疑惑/playsinlineは大事

ブラウザ内でインライン再生していないのが問題なので、「playsinline属性」を記述。
iPhone(iOS)ではvideoタグを使う時に「playsinline属性」がないと表示すらされない。
ということで「プレイヤー非表示で自動再生」をしたいなら…autoplayとmutedとplaysinlineがセット。
メディアクエリが効かない疑惑も解消しました。


playsinline
論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。
MDN web docs

OK例

<video autoplay muted playsinline loop>
<source src=".../●●●.mp4" type="video/mp4">
<img src=".../■■■.png">
</video>

これで解決!

「videoタグ スマホ 再生されない」
「videoタグ スマホ 自動再生」
「videoタグ スマホ」
「autoplay 効かない」

などの検索キーワードでいらっしゃる方が多いので、解決しますように。