Webサイトで動画を扱うことはもはや当たり前になっています。

その流れを汲んでか、HTML5でも新しく動画専用に<video>タグが追加されました。

そこで今回はこの<video>タグについて、基本~応用まで初心者の方にもわかるように解説してみたいと思います。

Webサイトで動画を扱う方法

Webサイトで動画を表示させるためには次の方法があります。

今回解説する<video>タグについては新しく導入された方法です。

これにより、動画を表示させる方法が一つ増えたという認識で問題ありません。

拡張子について

iframeを使う場合には意識することのない拡張子についてですが、<video>タグでもスマホなどでデフォルトとなっている拡張子「MP4」が扱えます。

またこの拡張子はほぼ全てのブラウザで対応しているため、今後も拡張子を気にする必要はないと言えるでしょう。

<video>タグの使い方

<video>タグは次のように記述します。

<video>
	<source src="sampleVideo_1.mp4" type="video/mp4" />
	<source src="sampleVideo_2.mp4" type="video/mp4" />
	<source src="sampleVideo_3.mp4" type="video/mp4" />
</video>

開始タグと終了タグの間に<source>タグを記述し「src」プロパティで動画ファイルのパスを指定します。

上のコードでは3つのsourceタグがありますが、こうすることでブラウザが自動で上から順番に再生できる動画ファイルを探して再生してくれるようになります。

ただし<video>タグはこれだけでは動画ファイルが読み込まれるだけで再生はされません

もちろんコントロールパネルも表示されないため、やはり属性で指定する必要があります。

<video>タグの属性

<video>タグに必要な属性を追加することで、使いやすく仕上げることが出来ます。

属性には次のようなものがあります。

controls

コントロールパネルを表示させるための属性です。

autoplay

自動再生させるための属性です。

Google chromeでは若干仕様が異なるため、mutedという属性も一緒に付帯する必要があります。

loop

繰り返し再生させたい場合に必要となる属性です。

poster

動画の最初に画像を設定できる属性です。

動画のサムネイルのようなものだと考えてください。

posterで指定した画像は動画が再生された時点で消えますが、一旦停止しても再度表示されることはありません。

フェイク動画などでよく見かけるため、あまり好まれない傾向にあります。

playsinline

スマホでWebサイトに埋め込まれた動画を再生した場合、強制的に全画面表示に切り替わることがあります。

この属性を付帯しておけば、そういった事故を未然に防ぐことが出来ます。

インライン再生させるためには、次の属性を全て付帯する必要がありますので注意してください。

width/height

動画ファイルの横幅と高さを指定したいときに使用する属性です。

HTMLで使用できる属性とは若干異なり、指定できる値はpxのみとなっています。

preload

動画を事前に読み込ませるかどうかを指定することが出来る属性です。

指定できる値は次のようになっています。

スマホなどのMobileデバイスではパケットに制限があるものがほとんどのため、むやみに動画を読み込ませるとユーザビリティに欠けてしまいます。

また、サイトにいくつもの動画ファイルがある場合には読み込み速度が落ちてしまいますので用途によって使い分けましょう。

実際に指定してみる

上記で説明した属性を指定して、実際にブラウザで動画がどのように再生されるかを見てみましょう。

<body>
	<video controls loop autoplay width="500px" height="300px">
		<source src="mov_hts-samp005.mp4" type="video/mp4" />
	</video>
</body>

表示結果

今回は指定した値として「controls」「loop」「autoplay」「width」「height」の5つを指定しました。

コントロールパネルはオーバーレイとなっているのでheightで指定する値によって、動画の中にあるようにも外に出ているようにも見せることが出来ます。

width及びheightについてはアスペクト比を考える必要はありません。

比率が変わっても縦横比は固定のまま、動画ファイルを再生できる枠の大きさが変更されるだけとなります。

上手く表示されない場合

<video>タグを設置しても表示されないということがありますが、この場合次の二つの原因が考えられます。

フォーマットが対応していない

基本的にはあまりないかもしれませんが、動画を編集している方の中にはフォーマットにH264以外を指定している場合があります。

H264以外でもキチンと再生されるものはありますが、H265などにしている場合は要注意です。

因みにGoogle chromeはH265では再生できません。

サーバーのAddTypeが未設定

localhostでは再生できたのに本番サーバーにアップロードすると再生されないケースもあります。

これはサーバー設定でAddTypeにフォーマット設定が未記述となっている場合に起きます。

解決策としては.htaccessなどでAddTypeの設定をすることでブラウザで再生できるようになります。

AddTypeの設定は次のように記述します。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

ただしこの方法はサーバーによって禁止されている場合があります。

使用しているサーバーで.htaccessが利用できるか、またサーバー設定を変更できるかどうかは各自で確認をとるようにしてください。

容量について

動画を扱うための<video>タグですが、動画自体にも若干の注意を払う必要があります。

再生側のユーザーは必ずしも同一スペックのデバイスで再生しているわけではないということを忘れないようにしてください。

例えば動画ファイルが1GBという大容量のものであった場合、PCで観覧する場合には問題ない人も多いかもしれませんが、Mobileデバイスでは大きな問題となります。

平均を考えるのは難しいですが、やはりユーザビリティを考えると1MB~5MB程度で抑えておく方が良いでしょう。

まとめ

いかがでしたか?

今回はHTML5で新たに導入された<video>タグについての解説を行ってみました。

動画を扱う機会は非常に多くなっており、ユーザーもそういったサイトを多く求めています。

開発を行うにあたりもはや当たり前に使用されるタグとなっているため、この記事をしっかりと読んでマスターしてみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。