ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Popcorn.jsは動画と別なコンテンツを連携させるHTML5ビデオフレームワーク。

Popcorn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサービスの説明動画や、勉強会の内容など動画をWebサイトに掲載するケースが増えている。そんな時には動画以外の資料も一緒に掲載したいと思うはずだ。


デモ

ニコニコ動画は動画とコメントと一緒に閲覧できるが、同じように動画と別なコンテンツを一緒に掲載したり連携させたいと思う事はないだろうか。それを実現するライブラリとしてPopcorn.jsを紹介しよう。

Popcorn.jsはHTML5動画フレームワークで、動画と任意のコンテンツを連携させるライブラリだ。例えば動画の横にスライドを載せ、指定時間になったら切り替えると言った具合だ。手で時間を進めたりした場合もコンテンツが切り替わってくれる。


外部の様々な情報を表示している

スライドに限らず、Wikipediaのコンテンツを載せたり、地図と組み合わせるような使い方もできる。動画の開始時間とTwitterのつぶやき時間を合わせたりすると、そのスライド間でつぶやかれた内容を表示する、なんて使い方も考えられるだろう。


MOONGIFTはこう見る

動画は編集しないととても単調で退屈なものになりやすい。視聴者の立場で考えれば、全ての記録があれば良いという訳ではないのだ。そんな素人の作成した動画をコメントを載せることで別な楽しさを加えたニコニコ動画はとても凄い。

Popcorn.jsでも同様に勉強会の様子とスライドを並列表示する事で、動画コンテンツの楽しみ方に違う方向性を与えてくれる。動画は見た目のインパクトは大きいが、ともすると退屈なものになる。Popcorn.jsを使って外部の情報と組み合わせるのはユーザを飽きさせないためにも有効な手段と言えるのではないだろうか。

Popcorn.js | The HTML5 Video Framework

デモ | Popcorn.js

webmademovies/popcorn-js - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2