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

動画というと語弊がありますが面白いソリューションだと思います。

HTML5ではvideoタグが使えますので、Webブラウザ上で動画を流すのがとても簡単になりました。しかし動画の表示制御はブラウザ任せになっている部分が多いかと思います。

例えばスマートフォンの場合、動画はインラインではなく画面全体に広がって流れてしまいます。そういったコントロールの効かない部分を含めて動画全体の制御ができるソフトウェアがFrame Playerです。次世代型アニメーションGIFとも言えそうな、面白いソフトウェアです。

まず準備をします。Web側はこんな感じ。

<div id="my-player" data-vidsrc="video.json"></div>
<script src="js/frameplayer.js"></script>

そして実際に動かすための指定が下のようになります。

var options = ({
  'rate': 30,
  'controls': false,
  'autoplay': true,
  'width': '640px',
  'height': '390px',
  // 'radius': '50%'
});
var player = new FramePlayer();
player.load('my-player', options);
player.play();

ぱっと見は動画ですよね。でも音声は出ません。
ぱっと見は動画ですよね。でも音声は出ません。

タネを明かすと、これは動画ではなくJPEGを繋ぎ合わせたものになっています。

ビデオファイルとおぼしき部分
ビデオファイルとおぼしき部分

JSONファイルを作成するのもFrame Playerでできます。最初はFFMPEGを使って変換します。

$ ffmpeg -i video.mp4 -an -f image2 "%d.jpg"

出来上がった画像群をJSON化するのはnodeまたはPHPでできます。

# nodeの場合
$ node app.js frameStart frameEnd folder/to/imgs/ json/video.json
# PHPの場合
$ php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json

この出来上がったファイルをFrame Playerで指定すれば、動画のようにインラインで表示が出来るようになる訳です。

細かい制御も可能になっていて、例えば下の場合はグレースケールに変換しています。

グレースケール。
グレースケール。

さらに色調反転。
さらに色調反転。

元々が画像で、それを切り替えているだけなのでプレーヤの形も自在に変更できます。

カスタマイズ版。
カスタマイズ版。

さらにスマートフォンでもインラインで再生が可能です。

スマートフォン。
スマートフォン。

音が出せないのは利点でもあり、欠点でもあるでしょう。動画とは違って、再生速度を含めかなり細かくカスタマイズができるはずです。画質を良くする(ファイルサイズを大きくする)とJSONファイルが大きくなってしまうのが難点なので、長くとも10秒程度の動画にしておくのが良いかと思います。

Frame PlayerはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Frame Player - A player based on images frames for mobile devices

vagnervjs/frame-player

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2