YoutubeやFacebookの動画広告など、各媒体で動画のポテンシャルに対する評価が高まる中、オウンドメディアでも動画コンテンツを展開し、動画マーケティングに注力する企業が増えています。

Webサイトのデザインも大きい静止画から動画を自動再生するものが増えており、より動画に対する注目が高まっております。

▼a Lifestyle 日本福祉大学生と知多のまち

▼海遊館

動画を再生するには動画プレイヤーが埋め込む必要だった一昔前とは変わり、Webサイトで容易に動画の実装ができるようになったのは、HTML5の<video>タグのお陰と言えます。

Webサイトを劇的リッチにできる便利な<video>タグですが、タグを活用する前に知っておくべき基本的な注意点をご紹介します。

IE8での再生

IE8での再生は<video>タグの問題というより、HTML5のサポート範囲が影響します。
これからのマルチデバイスに対応していくというHTML5の目的がありますので、古いブラウザは切り離して考えているようです。

JavaScriptを使った回避策がありますが、個人的な考えとしてはIE8のシェアが減少していますので、制作工数等考えて非対応も検討していいのではと思います。

スマートフォンでは自動再生できない

意外に認識されていないのがスマートフォンでの再生です。
スマートフォンでサイトを表示すると、そのタイミングでプレーヤーが起動されますが、自動で再生する事ができません。

動画を再生する時にプレーヤーが起動する仕様となっており、iOS、Android問わず同様の仕様です。2012年モデルあたりから自動で再生する事ができなくなりました。

提案や構築前に挙動を検証することが大切です。

動画のデータ形式と容量

ブラウザによってサポートしているデータ形式が異なります。
その中でも、MP4はどの最新ブラウザでも対応していますので、MP4にしておけば安心だと思います。スマートフォンにも対応してます。

データの容量については、<video>タグに規定はないのですが、サーバー側の問題があります。
サーバー側で収納できる容量は勿論なのですが、見落としがちなのがトラフィックです。
ダウンロードのデータ量が多くなってしまうと、トラフィック制限を掛けるサーバーもありますので、なかなかサイトが表示されないという問題が発生してしまいます。

単純な話ですが、データ容量が大きいとトラフィック制限が掛からなくともサイトの表示が遅くなりますので、ユーザーがサイトから離脱しやすくなります。
画質の質を保ちつつも容量を最小限に抑えることをおすすめします。

注意点のまとめ

・IE8での再生はJavaScriptを使えばで対応できるが、先方の要望と費用対効果を考えて検討する。
・スマートフォンでは自動再生ができない。PCと動きが異なる事を認識しておく。
・データはMP4で作成する。ユーザビリティも考慮してデータはできるだけ圧縮する。

基本的な注意点となりますが、オウンドメディアへの動画コンテンツ導入のご参考まで。

参考

a Lifestyle 日本福祉大学生と知多のまち
http://www.n-fukushi.ac.jp/lifestyle/

海遊館
http://kaiyukan.com/newkaiyukan/

ウェブアンテナ
http://www.webantena.net/javascriptjquery/ie8-html5media/

Next

This article is a sponsored article by
''.