テクニック

【video】スマホで動画が再生されない場合の対処法

動画をメインビジュアルに埋め込むページで<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 はセットで使おうと強く思いました。

上記の現象でつまずいた方は参考にしてみてください。

ABOUT ME
mami
mami
デザイン歴15年、ネット歴20年のアニメ・ゲーム大好き。 趣味はダンス・お酒と振り幅全開で生きるデザイナー。現在はフリーランスで、グラフィックデザイナー/WEBデザイナー/フロントエンドエンジニアとして活動中。