最初に

最近仕事で動画ものを扱うことが頻繁にあります。(変な意味ではありません)

HTML5ではvideoタグを使えば、Webブラウザ上で動画を再生させるのがとても簡単になりました。
しかし対象のデバイスがスマートフォンの場合はそうは簡単にはいきません。
例えばvideoタグを使って動画をiPhoneで再生しようとすると、動画をページに埋め込むような形式で再生することができません。
※以下、「動画をページに埋め込む形式」のことを「インライン」と呼びます。

(業務に使うかは置いといて) スマートフォンでもインライン再生させたい思いを胸に抱きつつ、
実現できそうな方法を調べていたら、とてもシンプルで使いやすいやつを見つけたのでメモ。
こいつです。
Frame Player
http://vagnervjs.github.io/frame-player/

おそらく"スマートフォン動画インライン再生"等でググれば一番上の方に出てくるのですぐ見つかると思います。
このFlash Playerの仕組みはとても単純で、一言で言えば「パラパラ漫画」です。
アニメーションGifに近いですね。
「mp4やwebmファイルをパラパラ漫画?」と思う人もいるかもしれませんが、Frame Playerではmp4をなんとかして再生させるのではなく
mp4 → jpg群 → json に変換してから再生させます。
この変換の作業は自分でやらなきゃいけないのでその辺りがちょっとマイナスですね。

とは言いつつも、少しいじってみたら意外と簡単にインライン再生まで辿りつけたので、その変換のフローも含めてまとめます。

準備

必要なものは以下です。足りないものがあったら必要に応じてインストールしてください。
* 動画ファイル(当たり前ですね。ここではmp4を例にとって説明します)
* ffmpeg (動画ファイルを1枚毎の画像に変換するのに使います)
* node または php (jpg群をjsonに変換するのに使います)
* あとこのリポジトリをcloneしておくか、bower install しておいてください

ffmpegのインストール
私、大変情弱なものでしてffmpegとやらを初めて聞いたので、そのインストール方法もメモしておきます。
やり方は何個かあるのですが、2つ程紹介。
*サイトからバイナリファイルを直接落としてくる方法
ffmpegmac.net　
ここから各自のOSにあったzipをダウンロード。解凍すると"ffmpeg"をいうバイナリファイルがあるので
それを/binにコピーすれば使えるようになると思います。

/binにコピー

$ cp path/to/fffmpeg /bin

*Homebrewで入れる方法

homebrewでも入ります

$ brew install ffmpeg \

さあ、いこうか

Frame Playerを使って、ブラウザでインライン再生させるまでの流れを簡単に説明するとこんな感じです。

① 動画を1枚1枚のjpgに変換
↓
② できたjpg達をjson形式に変換
↓
③ FramePlayerで提供されているjsを使ってインライン再生

1ステップずつ説明していきます。

① 動画を1枚1枚のjpgに変換

インライン再生させたい動画に対して、ffmpegを使って1枚毎の画像に変換します。

$ ffmpeg -i 動画ファイル名.mp4 -an -f image2 "%d.jpg"

成功すると、jpgファイルがいーーーっぱいできます。

② できたjpg達をjson形式に変換

①で作成したjpg画像達を今度はjson形式に変換します。
方法はnodeを使う方法とPHPを使う方法の2種類があって、どちらもFrame Playerのリポジトリから提供されています。
*nodeを使って変換

$ cd converter/nodejs
$ node app.js frameStart frameEnd Path/to/jpg/Folder json/video.json

*phpを使って変換

$ cd converter/php
$ php to_data_uri.php frameStart frameEnd Path/to/jpg/Folder json/video.json

いずれの方法も成功すると、変換された値がvideo.jsonに入ります。
※コマンド叩いても特に反応はないので、直接確かめましょう。

③ FramePlayerで提供されているjsを使ってインライン再生

①、②で素材の準備ができました。あとはこれを再生させればいいだけです。
まずHTML側で必要なのはこんな感じ。

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

このdivタグの中にパラパラ漫画を再生するcanvasがぼこっと入るっぽいです。
パラパラ漫画と言えど、動画チックな制御が簡単にできます。

var options = ({
            'rate': 30,
            'controls': false,
            'autoplay': true,
            'width': '640px',
            'height': '390px',
            // 'radius': '50%'
        });

        var player = new FramePlayer('my-player', options);
        player.play();

ふむふむできました。
サイズはもちろん、rateやautoplay、controls等のオプションが付けられたり、
play()やpause()のような動画の標準的なメソッドが備わっているようです。
(他に用意されているオプションやメソッドは追々まとめられたらと思います)

とりあえずここまでくればインライン再生までたどり着けます。
手元のiPhoneでもインライン再生することが確認できました。

リポジトリにはデモページも用意されてるようなので
動画をjsonまで変換するのが面倒な人はそっちで試してみるのもいいかもしれません。

最後に雑感

最後にこのFrame Playerを触ってみて思ったことを。
・音が出ない。
パラパラ漫画なので当たり前と言えば当たり前ですが・・・。
世の中のYoutubeの牛耳っぷりを見る限り、動画は音声付きが当たり前な雰囲気が蔓延っているので
別途音声ファイルを同期させて再生できるといいかもですね。
そういえばaudioタグってスマートフォンでインライン的な再生でき(ry
うああああああってなったのでここまでにしておきます。

・スマートフォンでの動画インライン再生について
日本のキャリアのデータ通信には月間数GBの制限が存在する為、容量の大きい動画をユーザに対して無許可で再生させることは非常にセンシティブな問題な気がします。そういった影響も考慮されているからスマートフォンでのインライン再生は基本サポートしてないのでしょうし。
どうしてもインライン再生したいというのであれば、「表示領域外であればダウンロードしない」等ゆーざびりてぃーをちゃんと考えて実装すべきですね。

以上、当たり前の雑感でした。

スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法①

最初に

準備

さあ、いこうか

① 動画を1枚1枚のjpgに変換

② できたjpg達をjson形式に変換

③ FramePlayerで提供されているjsを使ってインライン再生

最後に雑感