html5では<video>や<audio>といったタグを用いてマークアップを行うだけで、簡単に動画や音声の再生を行えます。
例:<video src=”ビデオガ保存されているURL” width=”400″ height=”300″></video>
使用可能な属性
参照: http://www.atmarkit.co.jp/ait/articles/1105/27/news112.html
width
height
controls (ブラウザネイティブのコントローラを表示)
src 動画ファイルのURLを表します
poster 動画データが利用できない間、代わりに表示しておく画像のURLを指定します。動画の1フレーム目の画像を指定するのが典型的な利用例です。
preload 動画データを事前に読み込むよう、ブラウザに指示します。指定可能な値は“none”(事前読み込みを行わない)、“metadata”(動画の幅や高さ、1フレーム目の画像、再生時間など、動画のメタデータのみ取得する)、“auto”(動画データの先読みを行う)のいずれかです。省略時の動作はブラウザに依存します。
autoplay 自動再生
loop 繰り返し Chrome10、Opera11、IE9、Safari5は対応(Firefoxは未対応)。
muted 音声なし
mediagroup 動画と動画、動画と音声などを同じグループとして同期できるらしいがいまいちよくわかってない 詳しくはこちらhttp://yhk.minibird.jp/honttoni/mediagroup.html#va_group
controls……動画の再生コントローラを表示
対応している要素のみを読み込ませる方法
<video width=”320″ height=”240″>
<source type=”video/ogg” src=”/video/HORIKITA_Maki.ogv” />
<source type=”video/mp4″ src=”/video/HORIKITA_Maki.MP4″ />
…
</video>