
iphoneなどのスマートフォンで動画を撮影したとき、拡張子は通常「.mov」です。
ここでは、この「.mov」拡張子の動画をHTMLサイトに埋め込むためのタグを紹介します。
動画埋め込み用HTMLタグ
動画を埋め込むには、<video>というHTMLタグを使います。このタグで埋め込まれた動画は、ユーザー環境のFlash設定の有無に関わらず読み込み・再生をすることが可能となります。
<video>タグのプロパティは以下の通りです。
プロパティ | 引数の説明 |
src | 動画ファイルのパスを指定 |
poster | キャプチャ画像ファイルのパスを指定 |
preload | 動画をあらかじめ読み込むかどうか(auto、metadata、none) |
autoplay | 引数なし。このプロパティ記述で自動再生となる |
loop | 引数なし。このプロパティ記述でループ再生となる |
width | 動画の横幅 |
height | 動画の縦幅 |
実際に動画を埋め込むサンプルプログラム
実際に<video>タグを使った動画埋め込みを行うサンプルプログラムを以下に紹介します。
サンプルプログラム
このままでは、背景が白いので動画であることが少しわかりづらいです。Youtubeなどの動画埋め込みのように、背景を黒くするには以下のCSSを記述しておきましょう。
CSS