HTML 【 動画の組み込み 】 ~ video要素

■スマートフォン画面内のウェブサイトは撮影用に作成したものです。

video要素は、audio要素(音声再生)と共にメディア要素と言われ、どちらもHTML5からの新要素です。
今回は、動画をプラグイン無しで再生させるためのvideo要素についてまとめたいと思います。

目次

1.video要素
2.video要素で動画を組み込む
3.source要素も使って複数の動画を組み込む
4.video要素の属性一覧

1.video要素

video要素は、動画をプラグイン無しで再生させるための要素です。

そして、メディア要素(video要素とaudio要素)の子要素で、複数のメディアソースを指定するために、source要素という要素もあります。
メディア要素は、src属性で1つしかメディアファイルを指定できませんが、source要素を併用すると、複数のメディアファイルを指定をすることができます。

使用する要素 <video>~</video>
<source>(空要素のため終了タグはありません)
video要素の属性 src属性 組み込むファイルのURL
controls属性 コントローラを表示
width属性 表示させる幅をピクセルで指定
height属性 表示させる高さピクセルで指定
poster属性 ロード中に表示するトップ画像のURL
autoplay属性 自動再生する
loop属性 ループ再生する
muted属性 ミュート(消音)で再生する
preload属性 プリロードするかどうか
mediagroup属性 複数のメディアを同期させる
グローバル属性 id属性、class属性、title属性、style属性など
source要素の属性 src属性 組み込むファイルのURL
type属性 組み込むファイルのMIMEタイプ
media属性 メディアタイプを指定
デフォルトはall
グローバル属性 id属性、class属性、title属性、style属性など

▲目次へ戻る

2.video要素で動画を組み込む

video要素は、src属性で動画ファイルのURLを指定して、width属性とheight属性で幅と高さのサイズを指定して使用します。
controls属性を指定すると、コントローラが表示されます。
poster属性で静止画像を指定すると、それがロード中の表示画面となり、src属性で指定したファイル形式をブラウザがサポートしていない場合は、代替画像となります。
ですが、video要素に対応していないブラウザでは、この代替画像すら表示されないので、古いブラウザ対策として、<video>~</video>間に代替コンテンツを入れます。

video要素で動画を組み込むと、次のように表示されます。

htmlコードは、以下の通りです。

<video src=”sample_video.mp4″ width=”400″ height=”300″ controls poster=”sample_image.jpg” preload=”auto”>
このブラウザは動画再生に対応していません
</video>

動画ファイル(上の例ではMP4ファイル)をサポートしていないブラウザでも、video要素に対応している場合は、poster属性で指定した画像が表示されます。
(video要素にすら対応していないブラウザは、<video>~</video>間に設定した代替コンテンツ(上の例では「このブラウザは動画再生に対応していません」)が表示されます。)

▲目次へ戻る

3.source要素も使って複数の動画を組み込む

source要素は、メディア要素(video要素とaudio要素)の子要素で、複数のメディアソースが指定できる要素です。

video要素のみで動画ファイルを1つ指定した場合、ブラウザによってサポートする動画形式が違うため、指定した動画が再生可能かどうかをブラウザに依存するという難点があります。

その点、video要素と共にsource要素を使うと、複数の動画ファイルが指定できるため、動画が再生できる可能性が限りなく広がります。
(MP4形式と、WEBM形式の動画ファイルを指定しておくと、video要素に対応しているブラウザで、動画が再生できます。)

source要素も使って動画ファイルを複数指定した場合の表示です。

htmlコードは、以下の通りです。

<video controls poster=”http://www.recipi.jp/recipi/wp-content/uploads/2017/03/colmun_image3200_01.jpg” preload=”auto” width=”400″ height=”300″ >
<source src=”http://www.recipi.jp/recipi/wp-content/uploads/2017/03/colmun_image3200_02.mp4″ type=”video/mp4″>
<source src=”http://www.recipi.jp/recipi/wp-content/uploads/2017/03/colmun_image3200_03.webm” type=”video/webm”>
このブラウザは動画再生に対応していません
</video>

source要素を使う場合は、source要素でsrc属性を指定するため、video要素のsrc属性は使用しません。
source要素で、src属性の指定(動画ファイルのURL)と、type属性の指定(MIMEタイプ)を行います。

source要素で複数の動画ファイルを指定する場合は、同じ動画内容でファイル形式が違うファイルが必要になるため、動画ファイルを違う形式に変換します。
オンラインで変換可能なサイトやフリーソフト等がありますので、検索してみて下さい。

▲目次へ戻る

4.video要素の属性一覧

src=”URL”
組み込む動画ファイルのURLを指定
動画ファイルを複数指定する場合は、ここでは指定せずsource要素で指定する

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

controls または controls=”” または controls=”controls”
コントローラを表示
ユーザが再生・ポーズ・音量調整などを行えるようになる

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

width=”表示させる動画の幅”、height=”表示させる動画の高さ”
表示させる動画の幅、高さをピクセルで指定

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

poster=”画像のURL”
動画が再生可能になるまで表示させるトップ画像(静止画面)のURLを指定
ブラウザが動画形式をサポートしていない場合は、この画像が代替画像となる

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

autoplay または autoplay=”” または autoplay=”autoplay”
ロード後すぐに自動再生する

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

loop または loop=”” または loop=”loop”
ループ再生する

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

muted または muted=”” または muted=”muted”
消音再生する

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop muted></video> 

preload=”none” または preload=”metadata” または preload=”auto”
3つの値のいずれかで、ブラウザに対してプリロードの指定を行う
(実際にプリロードするかどうかはブラウザに依存)
“none”:必要になったら初めて読み込む
“metadata”:メタ情報のみプリロード
“auto”:ブラウザの仕様通り

<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> 

mediagroup=”グループの名前”
この属性で同じグループ名を付けた動画同志、動画と音声、音声同志がグループとして扱われ、同期再生等が可能となる

<src=”sample1.mp4″ controls mediagroup=”s_group”></video> 
<src=”sample2.mp4″ mediagroup=”s_group”></video> 

この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
(グローバル属性についてはHTML5 【 グローバル属性 】 ~ 全ての要素で使える属性もご参照下さい。)

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です