カテゴリー別アーカイブ: ウェブ制作

ウェブ制作に関するテクニックや注意点など

動画をVLC Playerで連続的に静止画像として書き出す方法

とある案件で背景で動画を再生させたいという要望があった。
PCでは普通にvideoタグで再生させれば良いが、スマートフォンだと動画の再生はフルスクリーンになってしまうし、そもそもタップなどユーザーのアクションがないと再生させられない。こういうというときに、実装する方法は2つある。

  • Gifアニメを使う
  • スプライト画像を用意して、JavaScriptでパラパラ漫画のように再生する

今回はスクロールインしたときだけ再生するというように、再生を制御したかったので後者で実装することになった。
さてここで、動画を連続した静止画として書き出す必要がある。この方法が調べてもなかなか出てこなかったので書いておきたい。

使う再生ソフトはVLC Player 無料である。MacでもWindowsでも使えるが、Mac版の操作手順を解説する。Windows版も同じようなものだと思う。ちなみに表示が英語版なので、推測の日本語表記も書いておく。

Preferences (環境設定)> Interface (インターフェース)タブ > show All(全部見る)

Video > Filters > Scene Filter

“Recording ratio”には、何コマごとに画像として書き出すかを指定する。小さいと再生した時に滑らかな動きになる一方で、ファイル数は多くなる。大きいと再生が粗い(動きがカクカク)一方で、ファイル数を抑えられる。
“Directory path Prefix”は保存先ディレクトリを指定する。

左メニューから Filters > Scene video filter にチェック > Save(保存)

あとは動画を再生すれば、連続したコマ送りの静止画が指定ディレクトリに保存される。
書き出し作業を終わった時は、Scene video filterのチェックを外すことをお忘れなく。