Frame Playerを使おうとしてハマった箇所と対応メモ #JavaScript

背景動画をモバイルでも自動再生したいとの要望があり、Frame Playerというパラパラ漫画の仕組みで静止画（のバイナリデータ）を動画風に見せるプラグインを利用しました。
なお、こちらは音声の再生には対応しておりませんのでご注意ください。

基本的な使い方は検索すればいくつか記事がヒットするのでそちらを参考にしていただくとして、ここでは実際に使おうとしてハマった箇所と対応の備忘録になります。

FFMPEGって何？でハマった

Frame Playerの使い方を検索すると、ほとんどの記事でFFMPEGを使って動画ファイルを静止画に変換すると書かれていますが、そもそもFFMPEGって何？？どうやってインストールするの？？という状態でした。

私はMacを使っているので、Macを使ったFFMPEGのインストールはこちらを参考にしました。
▷macでffmpegを導入してmovファイルをgifファイルへ変換するところまで

ただし、こちらにはHomebrewを使ってインストールするとあり、未インストールだった自分はまずHomebrewのインストールから…。
ツールを使うためのツールをインストールするためのツールが必要…と、この時点で心が折れそうでしたが、気を取り直してHomebrew公式サイトの冒頭にある通りにスクリプトを実行してHomebrewをインストールしました。

次に当初の目的であるFFMPEGをインストールするので

brew install ffmpeg

で最新版をインストールします。

これで動画→静止画の変換が可能になったので次の手順へ進めます。
次の手順はこちらのページが分かりやすいです。
▷スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法①

ちなみに、Adobe CCを使っている方ならMedia Encoderを使って動画からjpgに変換することも出来ます。
ただし、連番（ゼロパディングなし）.jpgというファイル名でなければ上手く動かないのでご注意ください。

JSONファイルへ変換できずハマった

めでたくFFMPEGによって動画から大量の静止画（jpgファイル）を生成できたのもつかの間で、次はそのjpgを一つのJSONファイルにまとめる箇所でハマりました。

Frame Playerの公式サイトによると、nodeを使う方法とPHPを使う方法があり、コマンドを見ると

# Option 1: Node.js
$ cd converter/nodejs
$ node app.js frameStart frameEnd folder/to/imgs/ json/video.json

# Option 2: PHP
$ cd converter/php
$ php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json

と書かれています。

ふむふむ、cd converter/nodejsもしくはcd converter/phpは分かります。
コンバーターを置いているディレクトリへ移動するのですね。

確かに、Frame Playerをダウンロードすると
frame-player-master/converter/nodejs
もしくは
frame-player-master/converter/php
があるので、いずれかへcdでディレクトリ移動します。

ハマったのは次でした。

$ node app.js frameStart frameEnd folder/to/imgs/ json/video.json

とあります。

はて、folder/to/imgs/がjpgを含むディレクトリでjson/video.jsonがjpgから生成したJSONファイル名と出力先ディレクトリであろうことは何となく分かりましたが、frameStartとframeEndはそのままの記述で良いのか、ファイル名を指定するのか、指定する場合は拡張子を含むのか…が分からず何度かトライアンドエラーを繰り返す羽目に…。

結論ですが、最終的に

php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/ json/video.json

このようなコードになりました。
（なお、nodeでの実行を試みていましたが上手く行かずPHPを使うことにしました。）

順に説明しますと

php to_data_uri.php

まではそのままで、続く1 100というのはjpgのファイル名です。
FFMPEGを使って動画ファイルからjpgを生成する際に連番.jpgというファイル名になると思うので、スタートのファイル名と終わりのファイル名（※拡張子なし）を半角スペース区切りで指定します。

php to_data_uri.php 1 100

続く

/Users/hoge/frame-player-master/videos/

には先ほど指定したjpgファイルが収められているディレクトリを指定します。
ドラッグ＆ドロップで絶対パス指定する方が確実だし簡単かなと思います。

php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/

そして末尾に

json/video.json

と書きます。

これは生成したJSONファイルの出力ディレクトリ/ファイル名.jspnになります。
この書き方だとconverter/php内にjsonディレクトリが生成されます。
ファイル名はvideoでなくても良いのですが、こちらは拡張子有りで書かないとダメなのでご注意ください。

最終的にはこれで実行出来ました。

php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/ json/video.json

これでjsonファイルが生成されました。

あとはHTMLでjsonファイルを読み込み、jsで指定すれば動画風になったパラパラ漫画が実現出来ます。
その辺のコードは公式サイトをご参照ください。

Android端末でも動画のように見えるので、どうしても背景動画を使いたいorインライン再生したいという場合はご検討ください。
ただし、あまり長い動画だとJSONファイル容量が大変なことになります（最初30MBを超えました…）
また、正確には動画ではないので音声には対応しておりません。

下記のページを参考にさせていただきました。ありがとうございます。

▼スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法①
https://qiita.com/vivayashi/items/a978d39d7454c57f6227

▼macでffmpegを導入してmovファイルをgifファイルへ変換するところまで
https://qiita.com/Ryosuke-Hujisawa/items/6a1c47d31ac299dc1c46