動画というと語弊がありますが面白いソリューションだと思います。 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