動画をメインビジュアルに埋め込むページで<video>タグに少しつまずいたので、備忘録。
スマホで再生されない
パソコンのブラウザでは正常に再生されていたのに、スマホで確認したら再生されない。という現象に。
私はこれで解決したので、簡単に紹介。
コード
HTML
<video src="../○○.mp4" loop autoplay muted></video>音声がミュートの動画だったのもあり、ループ再生、オートプレイ、そしてミュート
よしOK！
と思いスマホで確認したところ
「あれ、動いてない….」
解決したコード
HTML
<video src="../○○.mp4" playsinline loop autoplay muted></video>playsinlineを追加したら動きました。
なぜ？
ブラウザ内でインライン再生がされていなかったとこが問題。
iPhoneでは、playsinline属性がないとコードによっては表示すらされない場合もあるようです。
まとめ
用途にもよりますが、今後<video>タグを使う場合、
autoplay muted playsinline はセットで使おうと強く思いました。
上記の現象でつまずいた方は参考にしてみてください。
