今回は、videoタグを使ってWEBサイトのヘッダー下のメインビジュアル部分などに動画を埋め込んだ時にPCではしっかり表示して再生されるがスマホで見ると全く表示と再生がされない場合の対処法について紹介します。
（実際のWEB制作案件であった実例です。）
<video autoplay="" loop="" muted="" poster="images/exsample.jpg">
<source src="images/exsample.mp4" type="video/mp4">
<source src="images/exsample.mp4" type="video/webm">
</video>今回記述した内容は上記のコードです。videoタグに「autoplay」「loop」と入れてmp4動画を埋め込みました。ループ再生と自動再生の動画をヘッダー下に埋め込んでいます。
この記述だとPC時には表示されて、スマホ時には表示されませんでした。
動画のサイズが大きすぎるからだと思い圧縮してみたがダメでした。コーデックに原因があるとか言う記事とかもありますが、私はWEB専門なので動画の事は詳しく無いのでとりあえず無視。わかる範囲で動画の書き込み方を変えてみたけどダメ。一周回って、そもそも記述の仕方が違うんじゃ無いかと色々と調べていたら、どうやら属性タグが足りてないからだったみたいです。
「playsinline=””」と言う属性を追加したらスマホ時でも表示されました。（下記の様に）
<video autoplay="" loop="" muted="" playsinline="" poster="images/exsample.jpg">
<source src="images/exsample.mp4" type="video/mp4">
<source src="images/exsample.mp4" type="video/webm">
</video>ひとまず、良かった。。。
ただ、動画の縦横比が維持されたままスマホに表示されるため上下のmargin、paddingが見えてきてしまいました。
この辺りは、メディアクエリ毎にスタイルを切り替える様にする事と、PC用動画とスマホ用動画を用意して振り分ける。そしてスマホ時に読み込む動画をスマホの画面幅に対して最適化しました。
そしたら下記の様に綺麗に表示され、しっかり再生されました。
最終的に上記の記述でしっかり表示はされたのですが、確認中にも何度か表示されなかった時がありました。その主な原因は下記の様な簡単な理由でした。
- キャッシュが残っている。（スマホのキャッシュの消し方は少しややこしかった。）
- 省電力モードになっていた。（このモードだと動画は再生されないらしい。）
スマホのキャッシュの消し方はこちら
以上が「埋め込んだvideoタグがスマホのみ表示/再生されない時の対処法」でした。
WEB制作で動画を埋め込む際は色々と注意しなくてはいけない点があります。
ここは私は苦手な部分なのでこれから学んでいきますが、とりあえずplaysinlineの属性は結構大事だと理解しました。
基本的に動画を埋め込むサイトの場合は、スマホ時の場合は画像に置き換えるのが常套手段かと思いますが、どうしても動画を埋め込みたい場合にこの様な時状態になったら試してみて下さい。
