クライアント側だけでローカルの動画を再生しつつ任意のタイミングでサムネイル画像を生成する

目的

ユーザに動画ファイルをアップロードしてもらうような機能を持つWebアプリで、
サムネイル画像を生成する場合はサーバ側でffmpegなどを使って生成することが多いと思います。
サーバ側ではなく、クライアント側でローカル動画ファイルからサムネイル用画像を作れないか調べました。

機能

おおまかに次の2つの機能を実装できれば実現できそうです。

1. ローカルの動画をvideoタグで再生する
2. videoタグから画像を生成する

ローカルの動画をvideoタグで再生する

File APIのBlob URLsというAPIが使えれば実現できます。

inputでローカル動画を選択したときに再生する

inputNode.addEventListener('change', function (event) {
    var URL = URL || webkitURL;
    var file = event.target.files[0];
    document.querySelector('video').src = URL.createObjectURL(file); // inputで選択した動画を再生する
}, false);

URL.createObjectURLを使えば簡単にローカルの動画を再生できます。
実際のコードはさらにブラウザの対応状況チェックや、再生可能な動画ファイル形式チェックなどが必要になると思います。

videoタグから画像を生成する

canvasのdrawImageメソッド使えばこちらも簡単に動画から画像を切り出せます。

captureButton.addEventListener('click', function capture() {
    var cEle = document.querySelector('canvas');
    var cCtx = cEle.getContext('2d');
    var vEle = document.querySelector('video');

    cEle.width = vEle.videoWidth;
    cEle.height = vEle.videoHeight;

    cCtx.drawImage(vEle, 0, 0); // canvasに関数実行時の動画のフレームを描画
}, false);

デモ

http://geekduck.github.io/localvideocapture/

まとめ

手元のモバイル端末(iOS8 Safari, Android Chrome)でも問題なく動きました。
iPhoneではサムネイル画像を作りたいタイミングで再生を一時停止し、
プレイヤーを閉じてキャプチャボタンを押下すればサムネイル画像を生成できます。

動画のフレームレベルでサムネイルを指定したいときなどは使えませんが、
ユーザがある程度自由なタイミングでサムネイルを作れれば良いのであればかなり使えると思います。