Popcorn.js | The HTML5 Video Framework

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



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



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



一度見ておくとよさそう→デモページ

オーサリングツールは、Butter というツールで行います。



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



動画に出てきた製品のADをそのまんま出すような、動画に合わせた広告等、色々と活用方法が考えられますね。

関連エントリ

• HTML5で動画や音声再生を可能にするライブラリ集
• CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」
• CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」