jsとHTML5で 『停電の夜のベースボール』 というサイトを作りました。

http://www.tatsuaki.net/nighter/
nighter_top

イントロの動画を含め10分以内で全部見れるサイトとなっております。
HTML5のサイトですが、主要なブラウザ全て対応いたしました。(safari、chrome、firefox、IE9)

ブラウザごとのメディアファイル(audioやvideo)の出しわけは、modernizr.js というライブラリを使用しました。
下記のように対応のコーデック名などで判別ができるため、とても使いやすかったです。

-------------------
if ((!Modernizr.audio.ogg && !Modernizr.audio.mp3) ||
(!Modernizr.video.ogg && !Modernizr.video.h264) ||
-------------------

firefoxのaudioのloop機能が、うまくできなかったため、loopのプロパティを使わずに、firefoxでの音楽のloopは、下記のように再生し終わったら0秒に戻すという処理でループするようにしています。

-------------------
// firefox doesn't support audio loop property
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
audio.addEventListener('ended', function() {
audio.currentTime = 0;
}, false);
}
-------------------

全ソースを、githubへ登録しておりますので、詳細につきましてはそちらをご覧ください。
cou929 / Outage-Night-Baseball

画像がマウスに沿って動く部分は、以前jsdo.itで作った 『アップルストア上海 のぐりぐり写真』 (参考:ぐりぐり写真を作ろう) のソースを元にしました。
この連番画像の作成は、AfterEffectsとPhotoshopの自動化を行い縦長画像を作っています。
自動化したjsなどについては、別途記載いたしました。
【関連】ぐりぐり写真用 Photoshop自動化javascript
 

東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 内で作り方など発表させていただきました。

3 Responses to “『停電の夜のベースボール』 作りました。”

  1. teraco - 東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 Says:

    […] 『停電の夜のベースボール』 作りました。(@tatiakiさん) […]

  2. itoz Says:

    縦長画像 自動化js 期待しています!!アレ凄いいいなと思いました。

  3. tatsuaki Says:

    こちら書きました!ありがとうございます。
    http://www.tatsuaki.net/blog/?p=857

Leave a Reply