トラブルご注意！HTML5<video>タグの注意点

2015-06-10

Yamakage @ transit tokyo

HTML5 Webサービス動画

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

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

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

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

学生とともに巡る、日本福祉大学のキャンパスエリア。日本福祉大学学生が4年間を過ごす場所、キャンパス周辺エリアのショップやカフェ、見どころのスポットなどをご紹介します。

www.n-fukushi.ac.jp

▼海遊館

生命と環境に、もっと近く！～海遊館新体感エリア～

海遊館は、わくわくと感動を提供する『新・体感エリア』を新設しオープンしました。

kaiyukan.com

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

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

IE8での再生

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

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

[JS]IE8 でもvideo タグが使えるJSライブラリ「html5media.js」 » WEBデザインのTIPSまとめサイト「ウェブアンテナ」

video タグでmp4 動画をサイトに埋め込む方法の記事でも紹介させていただきましたが、 video タグによる動画の埋め込みはWindows のIE8 だと非対応なので、今回は html5media.js というJ … 続きを読む [JS]IE8 でもvideo タグが使えるJSライブラリ「html5media.js」 →

www.webantena.net

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

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

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

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

動画のデータ形式と容量

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

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

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

注意点のまとめ

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

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