video要素
video要素は動画を表示や再生するための要素です。
src属性で読み込む動画のURIを、width属性で横幅を、height属性で高さを指定することができます。また、要素の内側には動画が表示できない際の為の代替コンテンツを指定することができます。
<video src="movie_sample.webm" width="400" controls autoplay>
<p>代替コンテンツ</p>
</video>複数の動画フォーマットから再生可能な動画を選んで再生させるにはsource要素に各動画ファイルのURLを記述します。
<video widt="200" widt="100">
<source src＝"source src="movie_sample.webm"">
<source src＝"source src="movie_sample.mp4"">
<source src＝"source src="movie_sample.ogv"">
<p>代替コンテンツ</p>
</video>各ブラウザは以下の動画フォーマットに対応しています。
| Chrome 32 | Firefox 26 | Safari 7 | IE 10 | |
|---|---|---|---|---|
| WebM | ◯ | ◯ | ☓ | ☓ |
| Ogg | ◯ | ◯ | ☓ | ☓ |
| MP4 | ◯ | ☓ | ◯ | ◯ |
video要素では対応する動画ファイルに.htaccessなどでMIME TYPEを指定していないと再生されたいことがあるので注意をしてください。
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webmposter属性を利用することで動画が再生されない際の画像を指定することができます。
<video src="movie.mp4" poter="poster.jpg" widt="200" widt="100"></video>preload属性は動画の先読みを指定できる属性です。「auto」を指定するとページの読み込み時に動画のロードを開始します。「metadata」を指定するとページの読み込み時に動画のメタデータのロードのみを行い、「none」を指定すると動画の先読みは行いません。
<video src="movie.mp4" preload="none" widt="200" widt="100"></video>autoplay属性を指定することで動画の自動再生を有効にします。
<video src="movie.mp4" autoplay widt="200" widt="100"></video>mediagroup属性を指定することでメディアのグループを作成することができます。
<video src="movie1.mp4" mediagroup="movie" widt="200" widt="100"></video>
<video src="movie2.mp4" mediagroup="movie" widt="200" widt="100"></video>loop属性を指定すると動画が終了した際にふたたび最初から再生が開始されます。
<video src="movie.mp4" loop widt="200" widt="100"></video>muted属性を指定することでミュート状態つまり無音で再生するための属性です。
<video src="movie.mp4" muted widt="200" widt="100"></video>controls属性を指定しすることでコントローラーを表示することができます。
<video src="movie.mp4" controls widt="200" widt="100"></video>crossorigin属性を指定することで異なるOrigin(オリジン)からのリソース取得を制御することも可能です。
参考URL
登録日 : 2014年01月10日 最終更新日 : 2014年2月9日