html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSとandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前のように「PCでは動画」「スマートフォンでは画像」というやり方が必要になってきます。
iOSでvideo要素が表示されない場合
video要素に「playsinline」属性を指定します。
例
<video id="" src="" muted playsinline></video>
スマートフォンで動画データが表示されない場合
video要素に「poster」属性を指定し、任意の画像をサムネイル画像として表示させます。
例
<video id="" src="" playsinline poster="example.jpg"></video>
サイトの表示を早くする
video要素は読み込むのに時間がかかるため、一部のブラウザーではloading属性を使って動画の読み込むタイミングをずらす事が出来ます。
「loading=”lazy”」
例
<video id="" src="" muted loading="lazy" playsinline poster="example.jpg"></video>
コメント