iphoneなどのスマートフォンで動画を撮影したとき、拡張子は通常「.mov」です。

 

ここでは、この「.mov」拡張子の動画をHTMLサイトに埋め込むためのタグを紹介します。

 

動画埋め込み用HTMLタグ

動画を埋め込むには、<video>というHTMLタグを使います。このタグで埋め込まれた動画は、ユーザー環境のFlash設定の有無に関わらず読み込み・再生をすることが可能となります。

 

<video>タグのプロパティは以下の通りです。

 

プロパティ 引数の説明
src 動画ファイルのパスを指定
poster キャプチャ画像ファイルのパスを指定
preload 動画をあらかじめ読み込むかどうか(auto、metadata、none)
autoplay 引数なし。このプロパティ記述で自動再生となる
loop 引数なし。このプロパティ記述でループ再生となる
width 動画の横幅
height 動画の縦幅

 

実際に動画を埋め込むサンプルプログラム

実際に<video>タグを使った動画埋め込みを行うサンプルプログラムを以下に紹介します。

 

 

サンプルプログラム

 

このままでは、背景が白いので動画であることが少しわかりづらいです。Youtubeなどの動画埋め込みのように、背景を黒くするには以下のCSSを記述しておきましょう。

 

 

CSS

 

 

おすすめの記事