WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

videoタグの属性を設定する

html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前のように「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>