cman.jpWEBページ作成
広告
<video> 「動画の再生」[読み方：ビデオ]
<video>タグは、動画の再生を行う場合に使用します。
2013年4月時点では、ブラウザにより使用できるファイル属性（拡張子）が異なりますので注意が必要です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<video>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<video> の仕様
<video> の属性
【構文】
<video src="動画ファイル" width="幅" height="高さ" autoplay controls・・・>
</video>
</video>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| src="動画ファイル名" | 動画のファイル名 ※「source」タグで複数の動画ファイルの指定が可能 | 「sample.ogv」 「sample.mp4」 「sample.webm」 拡張子：「.mp4」「.ogv」「.webm」 | ||||||||
| width="値" | 動画を表示する領域の幅 （ピクセルで指定） | 「200」 | ||||||||
| height="値" | 動画を表示する領域の高さ （ピクセルで指定） | 「300」 | ||||||||
| autoplay | 自動再生の指定 | - | ||||||||
| controls | コントロールを表示 | - | ||||||||
| preload="値" | 先読みの指定 |
|
||||||||
| loop | 繰返し再生の指定 | - | ||||||||
| muted | 音を出さない指定 | - | ||||||||
| poster="動画ファイル名" | 動画が表示できない、または、動画を再生するまでの間、表示させる画像のファイル名を指定 | - | ||||||||
| crossorigin="値" | CORS(Cross-Origin Resource Sharing)で使用される属性。他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定 |
|
||||||||
| mediagroup="グループ名" | 複数のメディアを1つのグループとして連携 ※HTML5以降に廃止。指定不可。 | （2013年4月時点で詳細不明） | ||||||||
| playsinline | インラインで再生の指定 ※HTML5以降に追加。 | - |
| グローバル属性 |
| |
| イベント属性 |
| |
<video>タグのサンプル
「source」タグを使用しないサンプル
（poster属性あり（動画が表示できない場合の指定））
（poster属性あり（動画が表示できない場合の指定））
<video src="e23.mp4" autoplay controls width="300"height="250" poster="MTFUJI.jpg">
</video>
</video>
「source」タグを使用するサンプル
（動画が表示できない場合メッセージを表示）
（動画が表示できない場合メッセージを表示）
<video autoplay controls width="300" height="250">
<source src="e23.webm"type="video/webm">
<source src="e23.mp4" type="video/mp4">
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
<source src="e23.webm"type="video/webm">
<source src="e23.mp4" type="video/mp4">
<p><a href="e23.mp4">動画ファイルを保存後に再生してください。</a></p>
</video>
動画：kawacho様、画像：skyseeker様よりダウンロードし利用させていただいています。
留意事項
広告