■
こんにちは。デザイナー兼エンジニアの酒井です。
近年、スマートフォンやタブレット、ウェアラブル端末等の普及によりマルチデバイス化が進むにつれwebサイトの表現方法も多種多様になってきています。
ユーザーは様々な新しい表現を求めますが、それに加え使用中の心地よさを求めます。
ユーザビリティを低下させることなく、表現の質を保つには全てのユーザー環境に対して適切な設定をする必要があります。
今回はその中でも映像コンテンツをwebサイトに使用する際の実装方法、対応ブラウザ、書き出し方法をお伝えできればと思います。
webでの映像需要
様々な表現が増える中、特にwebサイト上で映像を使用する例は増えてきています。
誰でも低コストで手軽に撮影や編集を行え、それを多くの人にシェアできる時代になった現在、映像は表現方法として標準化されてきています。
Webサイト上での映像表現も同じように現在頻繁に使用され、写真やイラストなどの静止画では表現できないようなストーリー性を生み出すことができます。
そのことからクライアントやエンドユーザーからの需要は高まっています。
html実装
webで映像を実装する際の方法です。
今回は現在標準使用されているMP4とWebMを例にします。
<video autoplay poster="ファイル名.jpg">
<source src="ファイル名.mp4">
<source src="ファイル名.webm">
</video>
上記がhtmlでの実装方法です。
上記では<video>タグ内のautoplay属性で、ページを読み込んだ際に自動再生するように指定し、
poster属性でユーザー環境により映像が表示されない場合の代替画像を指定しています。
さらに<source>タグ内のsrc属性で映像ファイルの読み込み順を指定します。こちらは優先度の高い順で上から記述します。
以下が主に使用される属性の種類です。
| src | 上から順に読み込む映像ファイルのパスを指定 |
|---|---|
| poster | 映像のワンカットを画像で表示 (映像が読み込み中の表示される画像、 映像がされない場合の代替画像) |
| autoplay | 映像を自動再生 |
| loop | 映像をループ再生 |
| width | 映像の幅を指定 |
| height | 映像の高さを指定 |
ブラウザ別対応状況
なぜsrc属性で拡張子が違う同じ内容の映像ファイルを指定するのかというと、それぞれの拡張子では対応できるブラウザがあり、それに対応するように複数の映像ファイルを指定しなければならないからです。
それでは各ファイル、ブラウザでの対応状況を見ていきましょう。
ここでは映像ファイルで現在主に使用されている
・MP4
・WebM
を例に見ていきたいと思います。
以下のリストのようにMP4,WebMの各ブラウザでは対応しているフォーマットはそれぞれ異なります。
各ブラウザでの代替手段を行うことによって、どのブラウザ環境からのアクセスでも映像をユーザーに見せることができます。
MP4(H.264)の対応ブラウザ
| ブラウザ | バージョン |
|---|---|
| IE | 9/10/11 |
| Microsoft Edge | 12以降最新版 |
| Firefox | 35以降最新版 |
| Chrome | 全て対応 |
| Safari | 3.2以降最新版 |
| Android | 4.4以降最新版 |
| iOS Safari | 3.2以降最新版 |
WebM(vp8)の対応ブラウザ
| ブラウザ | バージョン |
|---|---|
| IE | 未対応 |
| Microsoft Edge | 14以降部分対応 |
| Firefox | 28以降最新版 |
| Chrome | 25以降最新版 |
| Safari | 未対応 |
| Android | 2.3~4.4.4部分対応 5以降最新版(Google Chrome) |
| iOS Safari | 未対応 |
※2018年７月時点
2014年末の段階でMP4形式の動画ファイルはほとんどのブラウザで対応しています。
上記の表の通り、各ブラウザ環境に合わせた映像ファイルを用意し、ソース上で読み込ませることが必須になります。
しかし各種ブラウザに対応させたとしてもユーザー環境のよっては映像が再生されないという場合も起こり得るので、映像のワンカットなどを使用した代替画像をposter属性で指定するといいでしょう。
Web用映像の書き出し・軽量化
Webサイトに映像をのせる場合、映像を軽量化しましょう。
なぜなら映像が重く読み込みに時間がかかってしまうと、どれだけいいものを作ってもUXを低下させ、ユーザーが離れていってしまう可能性があるからです。
読み込み時間の長さはSEO面を考慮する際の重要な要素になります。
映像を視聴するユーザーの離脱率ついて以下の調査結果があります。
30秒以内の映像は20％
60秒以内の映像は30％
300秒(5分)以内の映像は40％
が離脱という調査結果があります。(Wistia社調査)
この調査結果から見てもweb上であれば30秒以内の長さが最適だと考えられます。
映像が長い場合、離脱率を考慮しサイトを全て見せたいのであれば、30秒以内に収めるようにしましょう。
また映像が短すぎてもループ再生などされている場合、映像特有のストーリー性を感じないものとなり煩わしく感じる傾向があります。ですので、10〜30秒程の尺がwebサイトでは適切でしょう。
映像を適切な長さにすることはファイルサイズを最小限にすることに繋がります。
さらにファイルサイズを決める大きな要素としてコーデックとビットレートがあります。このコーデックとビットレートを適切に設定することでファイルサイズを抑えることができ、結果としてユーザビリティの向上に繋がります。
コーデック
コーデックとは映像や音声を圧縮するためのアルゴリズムです。
・MP4 - H.264
・WebM - vp8
であれば問題はありません。
ビットレート
このビットレートが高いほどピクセルに正確に情報を割り当てられるので画質は上がりますが、同時にファイルサイズも大きくなります。
ビットレート設定には
CBR 「固定ビットレート」
VBR 「可変ビットレート」
があります。
CBR固定ビットレートは常に一定のビットレートを保ち、VBR可変ビットレートはシーンに適切なビットレートに可変します。
CBR固定ビットレートはファイルサイズが大きくなりやすく、web用に設定する場合にはVBR可変ビットレートにするといいでしょう。
次世代コーデック「H.265・vp9」
H.264やvp9は現在主流となっているコーデックですが、より優れた圧縮率、画質をもつ次世代コーデックが開発されています。
MP4の場合「H.265」という新しいコーデックの普及が進んでおり、これから主流になると言われているコーデックです。
「H.265」は「H.264」の後継規格として開発され、H.264と比較すると半分のビットレートで同等の画質を実現できます。半分のファイルサイズで済むため、容量を削減し、より高画質な映像を実現できます。現在ではYouTubeなどのストリーミングサービスでの採用が始まっています。
加えて「H.264」では4K,60fpsまでしかサポートしていませんでしたが、「H.265」では8K,300fpsまでサポートされています。
現在、「H.265」での映像はストリーミングサービスなど映像コンテンツを利用する場合に使用されておりますが、ライセンス料が発生するため、「H.264」が現在の主流になります。
対してWebMにも「vp9」というコーデックが開発されました。
「vp8」の後継規格として開発が進み、「vp8」の半分のビットレート、ファイルサイズでvp8と同等の画質を表現できます。「H.265」とは違いこちらはオープンソースですが、現状対応しているブラウザが少なく、対応待ちです。現段階では引き続きvp8コーデックを使うのが好ましいでしょう。
「H.265」、「vp9」は2018年現在ではストリーミングサイトがメインでの活躍の場となっております。ですので現状ではブラウザの対応状況を追いつつ、コーデックとしてはH.264、vp8での設定を行うといいでしょう。
まとめ
いかがだったでしょうか。
デバイスの多様化、一般化が進むに連れ、サイトのコンテンツをいかに工夫してみせるかという点で、映像を使うといった手法は主流になってきています。
webで表現できる10秒〜30秒の映像は決して長いものではなく、その短い時間の中でどう人を惹きつけるのかが重要になります。こういった映像の軽量化や対応することによりユーザー視点でのもの作りになります。
videoタグ
https://www.doe.co.jp/hp-tips/html5/video-element-embed/
ファイル形式
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
ブラウザ対応参考
https://caniuse.com/#search=video
コーデックについて
http://aviutl.info/ko-dekku-tigai/
http://aviutl.info/cbr-vbr-abr/
