今さら感満載ですが、今回「videoタグ」についてメモしたいと思います。

近年のWEBサイトは、動画をデザインパーツのギミックとして使用するデザインが本当に増えました。通信速度が年々早くなっていることもありますが、HTML5から使用できる「videoタグ」の存在は大きく、YouTubeやMP4の動画をWEBサイトに簡単に実装できます。また自動再生や繰り返し再生等、様々な属性があり動画の内容やデザインコンセプトに応じてコントロールできるのも魅力です。さらには、ストリーミング再生にも対応している所は秀逸ですね。
とは言え、古いブラウザや、一部のデバイスではエラーが起きる事もあり多少のケアは必要です。

videoタグで動画を埋め込む

videoタグを使用して動画をHTMLに埋め込むソースは以下です。

<video src=”sample.mp4″></video>

videoタグの属性

この動画は無限ループで再生したいとか、自動で再生したいとか、動画によって再生方法をコントロールしたいという場合に使用するのが属性です。
現在、主に使用する属性は以下の10種類になります。

• src＝動画ファイル挿入
• autoplay＝自動で再生
• autoPictureInPicture＝小画面再生
• controls＝コントロール操作
• width/height＝幅と高さ
• loop＝繰り返し再生
• muted＝音声
• playsinline＝再生画面の領域
• poster＝再生前のサムネイル画像
• preload＝動画読み込み

【属性】src

動画を読み込みます。

<video src=”sample.mp4″></video>

【属性】autoplay

表示された動画を自動再生した場合はこちら。

<video src=”sample.mp4″ autoplay muted></video>

ここで注意しなければいけないのはautoplayとセットでmutedを設定することです。設定が無いとChrome、Safari共に自動再生させることはできません。

後述しますが、mutedは音声を消した状態で再生されてます。音声を出力したい場合はcontrolsを併用します。
これによりユーザーが音量をかえることのできる機能が使用できます。

<video src=”sample.mp4″ autoplay muted controls></video>

【属性】autoPictureInPicture

最近良く聞く、ピクチャインピクチャモード機能です。
動画を再生しながら小画面モードにすることができる機能がautoPictureInPicture属性です。設定すればWEBサイト上で動画を見つつ、他の情報も見ることができユーサビリティを向上させます。

<video src=”sample.mp4″ autoPictureInPicture></video>

【属性】controls

ユーザーが再生・停止などできるコンパネが表示されます。
再生や停止の他、再生箇所の指定や音量コントロールができます。デザインパーツとしてはあまり使用しませんが、しっかり観てもらいたい場合は特別な理由が無い限り実装した方がいいでしょう。

<video src=”sample.mp4″ controls></video>

【属性】width/height

動画の縦横サイズを設定する属性です。px単位の設定しかできませんのでCSSで%設定にしてサイズコントロールした方が無難です。あまり使用はしなくてもいい属性です。

<video src=”sample.mp4″width=“200px” height=“133px”></video>

【属性】loop

名前の通り、動画をloop＝繰り返し再生することができます。デザインパーツに使用する際は実装しているケースが多いのではないでしょうか？

<video src=”sample.mp4″ autoplay muted loop></video>

【属性】muted

音声なしの動画にすることができます。autoplayとセットで設定するケースが多いです。また、ChromeとSafari同様にautoplay属性ではmutedが必須です。いきなり音声が出てビックリみたいな、ユーザービリティ低下も考えられているのかChromeとSafariではmutedが無いと再生されません。
原則入れた方が無難だと思います。

<video src=”sample.mp4″ autoplay muted></video>

【属性】playsinline

スマホで動画が自動で全画面に表示されないようにすることができます。インライン再生（WEBページを見ながら再生）の場合は設定した方いいでしょう。また、autoplay属性とmuted属性をセットにしないとインライン再生を行うことはできません。

<video src=“sample.mp4” autoplay muted playsinline></video>

【属性】poster

動画が再生される前に表示される画像を設定できます。YouTubeでいうインデックスのサムネですね。ユーザーがその動画を観たいと思わせるインセンティブでもあるので設定した方がいいでしょう。設定の際はcontrols属性とセットにし、画像を見たユーザーが再生ボタンを押せるようにしましょう。また、画像は初めて再生される前の一度だけで、再生後に停止しても再度表示されることはありません。

<video src=“sample.mp4” poster=“sample.jpg” controls></video>

【属性】preload

動画をアップしたWEBサイトの表示速度に対する属性です。
通常のサーバーはストリーミングサーバーと違いデータ容量の重い動画の再生はストレスが結構かかります。そのためWEBサイトのインライン再生する場合、ページ全体の表示速度自体が遅くなり離脱率を高めてしまいます。そこでpreload属性を利用して表示の優先順位を設定します。

preload属性の値は3つあります。

• none：事前にファイルの読み込みをしない
• metadata：先にメタ情報を読み込む
• auto：動画データを事前に読み込む

動画が何よりも優先されるのであればautoです。一方WEBサイトで利用する場合は、その他の情報が重要になるケースが多いのでnoneを設定します。

WEBサイトのインライン再生ならnoneが無難でしょう。

<video preload=“sample” src=“video.mp4”></video>

videoタグで再生できる動画ファイル形式

再生することができる動画ファイル形式は以下の形式です。

mp4・webm・ogg

一般的にはmp4が多いので、mp4はマストで用意しましょう。

ちなみにwebmはGoogle社が開発・公開しているオープンな動画ファイル形式です。oggOgg Projectによって開発された音声圧縮方式「Ogg Vorbis」で用いられる拡張子です。

各ブラウザに対応させる方法

videoタグはsourceタグとセットで使用する事で、各種ブラウザに最適な動画ファイルを再生させることができます。また、古いブラウザなどvideoタグそもそもが利用できない場合のメッセージも併用して記述しておくといいでしょう。

<video controls>
<source src=“sample.mp4”></source> 
<source src=“sample.webm”></source> 
<source src=“sample.ogg”></source> 
※現在の環境は動画再生に対応していません <!– 動画が再生されない時のメッセージ –> 
</video>

Android/iPhoneのエラー

AndroidとiPhoneで動画が再生されないエラーを良く聞きますが、ここでは代表的なエラー内容をメモします。

Android

Androidで動画が再生されない原因の多くはベーシック認証です。まずは解除してみましょう

iPhone

iPhoneで動画が再生されない原因の多くはplaysinline属性が入力されていないことです。iPhoneはインライン再生じゃないと動画を表示させることができません。なので、ほとんどのケースで再生画面の領域を設定するplaysinline属性の設定がマストとなっています。エラーがある場合playsinlineをチェックしてみましょう。

ストリーミング配信する

動画ファイルは他のイメージファイルと比較すると容量は重くなりがちです。ストリーミングサーバーではない一般のレンサバなどでは読み込みまでに時間がかかり、その他の見せたい情報が表示されないまま離脱されることもしばしば。

そこでvideoタグではストリーミング配信を利用することもできます。これはうれしい！

<video controls>
　　<source src=”動画ファイルのパス″>
</video>

これだけ。是非活用しましょう！

以上です。

動画はページ滞在時間をアップするのでSEO対策にも効果的です。一方表示速度のケアをしなければ離脱率が上がってしまう諸刃の剣です。メリット/デメリットを考慮しながら有効的に使用したいと思います。