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

---

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

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

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 src=".../●●●.mp4" type="video/mp4" playsinline loop autoplay muted poster=".../■■■.png">
</video>

表示サイズはcssで調整しています。

「poster属性」があることで、動画が読み込まれるまで静止画を表示してくれます。逆に、指定しないと読み込みが遅い場合、何も表示されていない状態になります。また、ブラウザが古いなどで動画が表示できる環境でない場合に、動画の代わりに静止画を表示させることができます。

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

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

2021/09/3に記事を修正しました。「OK例」に「poster属性」を追記しました。