videoタグで指定した動画がiOSで再生されない原因(動画の容量が原因かも)

vvideoタグで指定した動画が再生されないのは容量が原因の可能性もあり

videoタグで動画を背景にしたサイト作成中に、

iPadとiPhoneで動画が再生されない事象に陥りました。

コードはこのような感じです。

<video　src=“hogehoge.mp4" poster=“fugafuga.png" playsinline autoplay muted loop ></video>

iOSでの再生で必要とされるはずの属性「playsinline」設定しているのですが、どうにもだめ、、

画面は真っ白のままです。

MacBookではちゃんと再生されるんですけどね。

そこで、注目したのが動画の容量です。

使用していた動画は最初40.5Mがかなり大容量でした。。。

これを圧縮して13Mがにしたところ、

何事もなかったようにiPadとiPhoneで無事再生されました。

単純な話でした。

そもそも動画の容量が大きいと、読み込みに時間がかかってしまい

表示される前にユーザーが離れていってしまうので、

容量は1M以下、が基本のようですね。。。

とわいえ、「とりあえず、動画を埋め込んで再生してみたいっ！」って方もいるはず、
※私がそうでした。

必要な設定をしても、動画が再生されない場合は容量を疑って見て下さい。

MacBookにデフォルトで入っている動画編集ソフト「iMove」で

簡単に容量を圧縮できる方法を記載しておきます。

こちらのアプリですね。

画像では品質を変更

この他にも圧縮方法はいくらでもありますが、

今回はMacのデフォルトアプリで圧縮する方法を紹介しました。

videoタグがどうにも再生されない！っとなった場合は

動画の圧縮も検討してみてください。