どんなタグ？
動画を埋め込む時に使うタグ。
<video src="./sample.mp4″></video>
<video> タグは、
<video> ~ </video>で挟まれた範囲に、動画再生できるメディアプレーヤーを埋め込むタグです。
- どのカテゴリに属しているの？
-
video要素は フロー・コンテンツ, フレージング・コンテンツ, エンベデッド・コンテンツ というコンテンツ・カテゴリに属しているタグです。”controls”属性を持つ場合は、対話的コンテンツおよび知覚可能コンテンツにも属します。 - 梱包できるタグは？
-
video要素に梱包できるタグ（コンテンツ・モデル）は、 src属性を持つ場合は、０個以上の track 要素と video、audio以外の透過的コンテンツを梱包可能です。 src属性を持たない場合、０個以上の source 要素と video、audio以外の透過的コンテンツを梱包できます。です。
メディアプレーヤーを準備しなくてもいいから便利！
どうやって使うの？
<video> タグを書いて、
再生する動画を指定する。
video 要素は <video> タグに、src 属性で再生する動画を指定、もしくは、<video> 〜 </video> の中に、source 要素を使って再生する動画を指定します。
- 基本的な使い方
-
<video src="動画ファイルのパス"></video>
<video src="sample.mp4″><video>https://codehero.shibajuku.net/html/video/video-sample/
動画はあきさん（@nabeweb0928)が作成してくれました！！
- source要素を使った使い方
-
<video> <source src="動画ファイルのパス" type="形式"> video要素に対応してないブラザでの代替えテキスト </video>
<video autoplay muted controls>
<source src="sample.mp4″ type="video/mp4″>
<source src="sample.webm" type="video/webm">
このブラウザでは対応していません。
</video>https://codehero.shibajuku.net/html/video/video-sample03/
- どこでも使えるの？
- sampleタグは 埋め込みコンテンツを受け入れるすべての要素 が配置できるところならどこでも使えます。
動画ファイルをvideoタグで囲むだけで動画を埋め込むことができます。
使える属性は？
グローバル属性はもちろん、
src 属性はほぼ必ず使います。
<video> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。
autoplay 属性
自動再生をさせる属性です。データの読み込みが終わり、再生できる状態になった時点ですぐに再生が始まります。
最近のブラウザの仕様で一緒に muted 属性も設定しないと自動再生できません。
- 属性値
-
autoplay初期値- 自動再生します。
src 属性
再生する動画を指定する属性です。
video 要素のブロック内で<source> を使用することもできます。
- 属性値
-
ファイルのパス初期値- 再生する動画へのパスを指定します。
preload 属性
動画を予め読み込んでおくかどうかする属性です。
- 属性値
-
auto初期値- 動画を見ていない時でも、ファイル全体をダウンロードする
none- 動画を事前に読み込まない
metadata- 動画の長さなどのメタデータを読み込む
loop 属性
ループ再生をさせる属性です。最後まで再生すると自動で最初に戻り繰り返し再生されます。
- 属性値
-
loop初期値- ループ再生します。
controls 属性
動画の再生、一時停止などの操作するインターフェースを表示します。
- 属性値
-
controls初期値- コントロールパーツを表示します。
muted 属性
動画をミュート再生します。
- 属性値
-
muted初期値- ミュート再生します。
poster 属性
動画のヒントとなる画像を表示します。動画が再生されるまで表示されます。
- 属性値
-
画像ファイルへのパス初期値- 画像へのパスを指定します。
playsinline 属性
要素の再生エリア内で動画を再生する場合指定します。
- 属性値
-
playsinline初期値- 要素の再生エリア内で再生します。
サンプルが見たい
<video>タグを使ったサンプルを
いくつか紹介。
<video> タグを使ったサンプルを紹介します。
基本的な<video>タグのサンプル
<body>
<video src="sample01.mp4″></video>
</body>https://codehero.shibajuku.net/html/video/video-sample/
autoplay 属性, muted 属性を使ったサンプル
<body>
<video src="sample01.mp4″ autoplay muted></video>
</body>https://codehero.shibajuku.net/html/video/video-sample02/
最近のブラウザ事情により、autoplayする場合はmutedにしないと自動再生してくれません…
デフォルトスタイルは？
元サイズの動画ファイルを表示
一般的なブラウザでは、元サイズの動画ファイルをビデオプレイヤーで表示します。
なお、コントローラーの見た目は、ブラウザによって異なります。
Chrome、Safariでは下記のデフォルトスタイルがあたります。
video {
object-fit: contain;
}
対応ブラウザは？
モダンブラウザは問題なし！
<video>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 9 ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 4 ~
- Firefox
- Firefox 3.5 ~
- Safari
- Safari 4 ~
- Opera
- Opera 11.5 ~
最後に動画を作成してくれたあきさん（@nabeweb0928)、動画素敵すぎます！！
