Video Demo

This demo is my submission to the Mozilla Dev Derby of July 2011. Everything that happens on the page depends on the video. The background color changes along the main color of the current frame, and each time a new scene cut is detected, a frame is extracted from the video and moved on its side. These events create a visual experience that enhances the movie.

The code is available at https://github.com/gmarty/Mozilla-Dev-Derby-2011-07

This demo is built using several open source projects:

• SCD.js, scene cut detection in JavaScript
• Modernizr for CSS3 proprietary prefixes
• Closure Library

Follow me on Twitter: @g_marty

J'ai développé cette démo pour le Mozilla Dev Derby de Juillet 2011 sur le thème de la vidéo. Le concept consiste en une page qui réagit au contenu d'une vidéo. Le fond change selon la couleur dominante de l'image en cours, et un morceau de pellicule est extrait de la vidéo à chaque changement de plan. Ces différents évènements contribuent à la création d'une expérience visuelle qui enrichit la vidéo.

Le code est disponible sur https://github.com/gmarty/Mozilla-Dev-Derby-2011-07

Cette démo utilise plusieurs projets open source :

• SCD.js, détection de changement de scène en JavaScript
• Modernizr pour les préfixes propriétaires du CSS3
• Closure Library

Retrouvez-moi sur Twitter : @g_marty

このデモは2011年7月の「Mozilla Dev Derby」コンテストのために開発されたデモ。 ウェブページの中が動画によって変わるのがコンセプト。 コンセプトはウェブページの中を動画によって変えること 背景の色が動画に合わせて変わったり、各カットに動画からフレーム1枚を取り出したりする。 これで動画のもっと豊かなビジュアル体験が楽しめる。

ソースコードはhttps://github.com/gmarty/Mozilla-Dev-Derby-2011-07 からどうぞ。

このデモは下記のオープンソースプロジェクトを利用して作られた。

• SCD.js – JavaScriptの場面転換検出スクリプト
• Modernizr – CSS3のベンダープリフィックス
• Closure Library

Twitterもよろしくお願いします。@g_martyです。