WEBサイト制作の勉強

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

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

htmlに動画を埋め込む

www.ditjapan.com


html5からhtmlに直接動画データを埋め込むことが出来るようになりました。
htmlで扱える動画データはmp-4とweb-mの2種類です。

<video src=""></video>


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

オプション設定

  • controls:コントロールパネルを表示する
  • autoplay(muted属性とセット):自動再生
  • loop:リピート再生
  • poster="":画像を指定することで動画が読み込まれるまで指定した画像が表示されます

iOSでvideo要素が表示されない場合

iOSでは自動再生が設定されている動画は表示されない事があります。その際にはvideo要素に「playsinline」属性を指定します。

<video id="" src=""  muted loop playsinline></video>