HTML5 videoタグを活かした、フルスクリーンの動画再生サイト

今回はSNSアプリ『Path』のWebサイトを解析していきます。Pathは、フォローしあえる友人の数を150人までに制限しているクローズトなSNS。FacebookやTwitterで必要以上にひととつながりすぎて、「本当に親しい人」の間でのコミュニケーションを楽しめないひとのソーシャル疲れを解決してくれます。全世界でユーザー数200万人と公表されています。アプリの詳細やマーケティング視点での分析はJ-CASTの記事をご覧いただければと思います。

今回はこのPathの「Webサイト」がユニークなので解析したいと思います。このサイトの一番の特徴は、フルスクリーンの動画再生サイトであることです。サイトを訪れると背景すべてが動画のインターフェースになっていて、アプリを使用している動画が自動再生されます。

フルスクリーンの動画再生ウェブサイト

このサイトのポイントは、「動画」です。背景がそのまま動画になっており、開いた瞬間に開始されます。これはHTML5から追加になったvideoタグを活用しています。videoタグの使い方は非常に簡単です。例えば、test.mp4という動画を埋め込む場合、

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

とするだけです。以下のページに詳しく書かれていますので、ご参照ください。

<video>タグで動画を埋め込む

videoタグをライブラリを使って非対応ブラウザにも対応させる

しかし、videoタグはHTML5をサポートしているブラウザでしか使えません。そこでこのサイトでは、IEなど対応していないブラウザでも再生できるようにjavascriptライブラリのMediaElement.jsを使っています。
・MediaElement.js

詳しい使い方は以下の記事をご参照ください。
・HTML5 VideoまとめとMediaElement.js
・スマートフォン向けHTML5のVIDEOタグを使った動画再生 ～MediaElement.js編～

また、このサイトではフルスクリーンになるように、ブラウザのウィンドウサイズに合わせて、動画のサイズを拡大・縮小しています。ウィンドウの大きさを変えていくとよく分かります、追従して動画が拡大・縮小します。

YouTubeを使った動画フルスクリーン

この方法の他にも、YouTubeのiframeを全画面背景にする方法もあります。以下を参照ください。
・CSSだけで背景をフルスクリーンYouTubeにする
・背景にフルスクリーンで動画を流す「jquery-tubular」

動画を使うときは容量に注意する

動画を背景に埋め込むときの注意点は容量です。あまりに重い(数分とか)の動画だと、通信速度にもよりますが停止しかねません。この「Path」のサイトの動画も10秒程度にされています。

静止画を背景全画面にする

静止画であればこのような心配は要りません。静止画でもダイナミックな印象をあたえることができるかもしれません。以下のリンクで静止画を全画面にする方法が紹介されています。ご参照ください。
・CSS3フルスクリーン背景スライドショー
・写真が引き立つ！フルスクリーン背景（スライドあり・なし）のコーディング9種 +1

ダイアログ形式で動画を再生させている

今回の「Path」のサイトには他にも動画が埋め込まれています。サイトの左側に並んでいる二つの動画です。

こちらを再生すると以下のような画面になります。

これは前回に紹介したダイアログ表示を使っています。
・Facebook・Twitterと連携した写真投稿 / 投票コンテンツの作り方

通常時はdisplay:noneに設定しておき、クリックされたときに表示させています。今度の動画は、vimeoの動画をiframeタグで埋め込まれています。

HTML5が注目を集める理由の一つであるマルチメディア機能。その重要な位置を占める「動画」はWebサイトの表現力を高め、ブランドや商品の魅力を存分に伝えるのに有効でしょう。