video要素で動画ファイルを埋め込む【HTML】

動画ファイルを埋め込むときはvideo要素を使います。

video要素はプラグインを必要なわけではなく、ブラウザの基本機能で動画再生が可能になっています。

video要素の内容に関しては、video要素に対応していないブラウザ環境においての代替コンテンツになります。

video要素で使える属性

video要素で使える属性には以下のようなものがあります。

• src（ソース）
• crossorigin（クロス・オリジン）
• poster（ポスター）
• preload（プレ・ロード）
• autoplay（オート・プレイ）
• mediagroup（メディア・グループ）
• loop（ループ）
• muted（ミューテッド）
• controls（コントロールズ）
• width・heigth（ウィズ・ハイト）

src（ソース）

imgタグで使うのと同様、src属性で埋め込む動画ファイルのURLを指定します。

crossorigin（クロス・オリジン）

crossorigin属性は、CORS（Cross-Origin Resource Sharing）という、異なるドメインの間で画像などを共有したりするクロスドメイン通信の設定をする属性です。

anonymousとuse-credentialsという値を指定することができ、値が空だったり正しくない場合はanonymousとして扱われます。

2つの値の違いは以下の通りです。

anonymous

CookieやクライアントサイドのSSL証明書、HTTP認証などのユーザー認証情報は不要

use-credentials

ユーザー認証情報が必要

poster（ポスター）

poster属性を指定することによって、動画が再生されないときや再生まで時間がかかっている間に代わりの画像を表示することができます。

なのでposter属性の値として「poster=”sample.jpg”」みたいな感じで、画像のURLを指定すればOK。

preload（プレ・ロード）

preload属性で、再生する動画ファイルを事前に読み込むかどうか指定することができます。

ただし、ブラウザ環境によって挙動が左右されるので、指定した通りの挙動になるとは限らないのだとか。

また、autoplayという属性もあるのですが、そのautoplay属性も指定されている場合、preload属性の指定は無視されます。

preload属性で指定できる値は以下のようなものがあります。初期値はautoになっています。

none

noneを指定すると動画が必ず再生されるとは限らないし、不必要なトラフィックを避けたいということをブラウザに伝えることができます。

metadata

video要素で読み込むリソースの再生時間などの情報（メタデータ）は先に取得しておくということをブラウザに勧めます。

auto

トラフィックなどは気にせずに、ユーザーのニーズを優先して、リソース全体をダウンロード開始していいということをブラウザに伝えることができます。

autoplay（オート・プレイ）

autoplay属性を指定していると、動画ファイルを読み込んだ際、自動的に再生されます。

先ほども言いましたが、autoplay属性を指定していると、preload属性の指定は無視されます。

ちなみにautoplay属性は値を必要としない論理属性です。

mediagroup（メディア・グループ）

音声や動画ファイルのグループ名を指定するのがmediagroup要素です。

mediagroup属性はvideo要素でも指定できるのですが、同じ文書内で同じmediagroup属性の値を持っていたら、それらのvideo要素やaudio要素はグループとして扱われるので、連続再生などができるようになります。

loop（ループ）

loop属性は動画ファイルがエンドレスで再生されるように指定します。

loop属性は値を必要としない論理属性です。

muted（ミューテッド）

muted属性を指定すると、動画ファイルはミュートした状態で再生されます。

muted属性は値を必要としない論理属性です。

controls（コントロールズ）

controls属性を指定することで、動画ファイルの再生をコントロールするためのインターフェースを表示させることができます。

controls属性は値を必要としない論理属性です。

width（ウィズ）・height（ハイト）

img要素でも指定できるのと同じく、動画ファイルでもwidthとheightを使って幅と高さを指定できます。

値として指定できるのは正の整数です。