HTML5トレンドで “背景フルスクリーン動画” のサイトが増えるかもしれない。

このエントリーをはてなブックマークに追加

先日ブログでご紹介した『パララックス効果』、おかげさまで非常に好評だったのですが、あまりにもいろんなサイトで採用されているのでそろそろ新鮮味に欠けてきました。私が個人的に好きでぜひ流行ってほしい、それにウェブ技術の文脈的にも次に来るんじゃないかと思っているウェブデザインの表現が『背景フルスクリーン動画』です。文字通り、ウェブサイトの背景が全画面の動画になっています。

アプリの使い方を背景動画で紹介する『Path』のウェブサイト

『Path』はフォローしあえる友人の数を150人までに制限しているクローズトなSNSアプリ。サイトを訪れるとアプリを操作するひとの手と、挙動するアプリの画面を動画で映しています。

男女の学生がひたすら歌いつづける芸大のウェブサイト

東京藝術大学大学院映像研究科 メディア映像専攻 年次成果発表会「Media Practice11-12」のサイトでは、同研究科所属と思われる学生2人がデュエットを披露。視聴者は、ゆるいテンポで繰り返される単調なメロディーと、歌詞に不思議と引き込まれて行きます。

やわらかい光の映像があたりを照らす卒展のウェブサイト

平成23年度武蔵野美術大学卒展・終了制作展の告知サイトでは、背景にゆらゆらと揺れるやらわかい光の映像を設置。ずっと眺めていたくなる美しい映像です(現在、動画は再生されなくなっています)。

背景フルスクリーン動画のサイトはHTML5から追加になったvideoタグを活用して制作します。また、videoタグ、つまりHTML5をサポートしていないIEなどのブラウザでも再生できるようにするにはjavascriptライブラリのMediaElement.jsを使います。この方法の他にも、YouTubeのiframeを全画面背景にする方法もあります。技術的なより詳しい解説はこちらの記事をご覧ください。

背景フルスクリーン動画のサイトはとにかく美しい。そしてHTML5を活用すれば、iPhoneでも再現可能です。まだ有名な企業で採用された事例がないからこそ、ぜひ挑戦してみたいですね。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ