HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」
2011年03月10日-
スポンサード リンク
Popcorn.js | The HTML5 Video Framework
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」
例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは?というもので一見の価値はあります。
独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。
TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。

映像の位置を地図で別ブロックに表示する例

ビデオの内容に応じてTwitterのメッセージを流す例

一度見ておくとよさそう→デモページ
オーサリングツールは、Butter というツールで行います。

使い方としては開いてみるとビデオのタイムラインがでるので、右下の「Add Commands」でコマンドをクリック。
するとFlashのタイムラインっぽくなってくるので、黄色い部分をドラッグしてビデオの再生位置に合わせつつ、ダブルクリックしてパラメータをカスタマイズし、動きを決めるものです。

動画に出てきた製品のADをそのまんま出すような、動画に合わせた広告等、色々と活用方法が考えられますね。
関連エントリ
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」
例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは?というもので一見の価値はあります。
独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。
TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。

映像の位置を地図で別ブロックに表示する例

ビデオの内容に応じてTwitterのメッセージを流す例

一度見ておくとよさそう→デモページ
オーサリングツールは、Butter というツールで行います。

使い方としては開いてみるとビデオのタイムラインがでるので、右下の「Add Commands」でコマンドをクリック。
するとFlashのタイムラインっぽくなってくるので、黄色い部分をドラッグしてビデオの再生位置に合わせつつ、ダブルクリックしてパラメータをカスタマイズし、動きを決めるものです。

動画に出てきた製品のADをそのまんま出すような、動画に合わせた広告等、色々と活用方法が考えられますね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 過去のエントリ