音声・動画

動画フレーム抽出

動画から静止画を取り出します。サムネイル用に 1 枚だけ抜くことも、数秒おきにまとめて書き出すこともできます。FFmpeg がブラウザー内で指定時刻から位置を探し、元の解像度で保存します。実際に得られたフレームの時刻も確認できます。

  • 指定時刻から抽出し、実際に得られたフレームの時刻も確認できる
  • タブ内で元解像度のままデコードし、ファイルはアップロードしません

動画ファイルをここにドロップ

ファイルは手元に残り、アップロードされません

MP4、MOV、WebM、MKV、AVI、M4V のほか、FFmpeg が扱えるたいていの形式を読み込めます。

まだ動画が選ばれていません

まず動画ファイルを選んでください。抽出エンジンのダウンロードはそのあとで始まります。

静止画

概要

動画から 1 枚取り出すのは簡単そうでいて、雑にもなりがちです。このツールが確認しやすくするのは、保存した画像が実際にはどの時刻にあるフレームなのか、という点です。

  1. 01

    指定時刻と実際のフレームを確認できる

    静止画は 1 枚ごとに指定位置から探してデコードします。動画のフレームが任意のミリ秒ごとにあるとは限らないため、その位置以降で最初に得られるフレームを保存し、実際の時刻を表示します。丸められた入力値だけを頼りにせず、狙った場面かどうかを確認できます。

  2. 02

    画面の表示サイズではなく元の解像度

    ブラウザでよくある手は video 要素をシークして canvas に描く方法ですが、得られるのはプレイヤーがデコードした絵を要素のサイズで写したものです。ここでは FFmpeg がファイルから直接デコードするため、4K の素材からは 4K の静止画が出ます。小さくしたい場合だけ指定してください。

  3. 03

    1 枚でも、範囲まるごとでも

    サムネイル用に 1 枚だけ抜く、範囲内で数秒おきに抜く、範囲全体から等間隔に指定枚数を抜く、のいずれも選べます。等間隔のときは各区間の中央を取るので、多くの録画の冒頭にある黒画面が 1 枚目になりません。

  4. 04

    どの時刻のフレームかを明記

    すべての静止画に、それが実際に持っているタイムスタンプが添えられます。1 枚だけ抜いたときに、着地したフレームが指定より後ろだった場合は、その旨をはっきり表示します。黙って丸めることはしません。

  5. 05

    PNG・JPEG・WebP と、指定できる出力幅

    PNG は可逆圧縮でデコードしたフレームをそのまま保存し、JPEG と WebP は画質を少し譲ってファイルを大幅に小さくします。サムネイル用途では出力幅を指定でき、元より大きい幅は拡大せずに無視します。

  6. 06

    すべて手元で処理

    FFmpeg を WebAssembly にコンパイルしたものがタブの中で動きます。アップロードなし、サーバー側のサイズ上限なし、順番待ちなし、透かしなし、アカウントも不要です。

使い方

録画から静止画一式まで、4 ステップです。

  1. 01

    動画をページにドロップするか、ファイル選択から開きます。ここで抽出エンジンのダウンロードが始まり、およそ 31MB で初回だけです。続いて解像度、フレームレート、長さが読み取られます。

  2. 02

    抽出のしかたを選びます。1 枚、数秒おき、範囲内で等間隔に指定枚数、のいずれかです。1 枚モードでは矢印が 1 フレーム分の間隔で動き、時刻を直接入力することもできます。

  3. 03

    形式を決めます。原寸ではなくサムネイルが欲しいときは出力幅も指定してください。PNG は可逆で、JPEG と WebP はかなり小さくなります。

  4. 04

    抽出を押します。結果は右側に、それぞれの取得時刻付きで並びます。1 枚ずつ保存しても、ZIP でまとめて受け取っても構いません。

詳細

保存した画像が狙ったフレームかどうかを左右する部分です。

  • 指定時刻から抽出し、1 枚の場合は実際のフレーム時刻を表示
  • 1 枚、指定枚数、選んだ範囲内で N 秒おき、の 3 通り
  • 等間隔モードは各区間の中央を取り、冒頭の黒画面を避ける
  • 元のフレームレートが読めれば、1 枚モードの矢印は 1 フレーム分の間隔で動く
  • 時刻は秒、m:ss.ddd、h:mm:ss.ddd のいずれでも入力可能
  • 各フレームの実際のタイムスタンプを表示し、ファイル名にも入れる
  • PNG・JPEG・WebP に対応し、非可逆の 2 形式には品質調整あり
  • サムネイル向けの出力幅を指定でき、元より大きくは拡大しない
  • プレビューの表示サイズではなく、元の解像度でデコード
  • 1 枚ずつの保存と、ZIP でのまとめ取得
  • エンジン取得中は実際のバイト数で進捗を表示し、見せかけのアニメーションではない
  • 実行中の一括抽出は停止でき、そこまでの分は残る

活用シーン

スクリーンショットではなく、手元で抜いた実フレームが効く場面です。

  1. 動画のサムネイル用の 1 枚

    投稿画面も商品ページもサムネイルを求めてきます。ここなら 1 フレームずつ動かして、誰も目を閉じていない一コマまで数秒で詰められますし、得られるのはプレイヤーの写しではなく原寸のフレームです。

  2. 画面録画を手順書に変える

    操作の録画を文章の手順書にするとき、いちばん手間なのが図版です。説明した節目ごとに 1 枚ずつ抜いて文書に貼り、そこから注釈を入れれば作業がかなり速くなります。

  3. 絵コンテとサムネイル一覧

    範囲全体から等間隔に何枚か抜けば、その映像の流れが一画面で見渡せます。中身の分からない録画を把握するには、頭から通して送るよりずっと速い方法です。

  4. 不具合報告に添えるフレーム

    録画した不具合は、発生の瞬間を指し示せて初めて役に立ちます。前後の 2 フレームを抜いて貼るほうが、誰も送り直さない動画を添付するより伝わります。

  5. アップロードすべきでない素材

    インタビュー映像、医療系の動画、社内ツールの録画には、変換サイトに渡すべきでないものが写り込みます。タブ内で抽出すれば、録画は元からあった端末に留まります。

  6. 参考画像や画像セットの用意

    色の参考、ポーズの参考、素材から画像セットを組む作業は、いずれも一定間隔でフレームを抜くところから始まります。手元で行えば、アップロード待ちも素材量の上限もありません。

関連情報

静止画の抽出は、たいてい長い作業のひと工程です。長い録画のうち一部だけが必要なら、先に切り出しておくと読み込む量が減ります。それを担うのが 動画のトリミング。1 枚では伝わらず動きが要る場面ならアニメーションのほうが向いていて、そちらは 動画を GIF に変換。抜き出したあと、複数の画像を同じ幅にそろえる作業はまた別で、そこは 画像リサイズの担当です。

使い方のヒント

一度で狙ったフレームに当てるためのコツです。

  • まずプレイヤーでおおよその位置を探し、そこから矢印で微調整する。最後は結果に表示される実際の時刻を確認する
  • あとで切り抜き、注釈、色の取得をするなら PNG、そのままサムネイル一覧に並べるだけなら JPEG か WebP を選ぶ
  • まとめて抜く前に出力幅を決めておく。4K 素材の原寸静止画は 1 つのタブの中ですぐに積み上がります
  • 中身の分からない録画は、まず等間隔で十数枚抜く。頭から送るより速く、どこを見るべきかも分かります
  • 1 枚だけ抜いたら表示された時刻を確認する。狙いより後ろに落ちていれば、その行がそう教えてくれます
  • 長い素材は先に必要な範囲を切り出しておく。1 分ぶん抜くためだけにファイル全体を読み込ませずに済みます
  • 長尺や高解像度の素材はデスクトップのブラウザで抽出する。スマートフォンはタブに割り当てられるメモリがかなり少なめです

制限事項

このツールが意図的に扱わないことと、苦手な部分です。

  • 静止画を抜くだけです。抜いたフレームから GIF やアニメーションを作ることはせず、動画の編集や書き出しも行いません。
  • フレームを選んではくれません。シーン検出も最適フレームの採点もなく、どの瞬間かを決めるのは利用者です。だからこそ 1 フレームずつの移動も範囲の一括抽出も軽快に動きます。
  • PNG は可逆ですが、動画がすでに受けた圧縮を取り消すことはできません。抜き出すどのフレームにも、録画時のエンコードの影響がすでに乗っています。
  • 1 回の実行は 200 枚までです。ダウンロードするまで 1 枚ずつメモリを占めるためで、それより広い範囲は複数回に分けてください。
  • 1 フレームをデコードする前に動画全体をメモリへ読み込みます。2 時間のファイルから 1 枚だけ抜く場合でも、2 時間ぶんの読み込みは必要です。
  • エンジンは初回およそ 31MB です。以降はキャッシュされますが、新しいブラウザプロファイルでの最初の 1 回はこのダウンロードを伴います。
  • WebAssembly は 32 ビットで、読み込み中は元ファイルがメモリに載り続けます。おおよそ 4 分の 1 ギガバイトを超える動画から不安定になります。
  • HEVC 入りの MKV のように、FFmpeg では問題なく読めてもブラウザのプレビューでは再生できない容器があります。抽出はタイムラインと時刻入力で通常どおり行えますが、動くプレビューだけがありません。

よくある質問

ブラウザで動画から静止画を抜くときによくある質問です。

動画から 1 フレームだけ取り出すには?

ファイルをページにドロップし、スライダーか矢印ボタンで目的の瞬間まで動かして抽出を押します。元の解像度でデコードされた画像が 1 枚返り、PNG・JPEG・WebP のいずれかで保存できます。アップロードはなく、すべてタブの中で完結します。

抜き出した画像は指定した時刻のフレームですか?

ツールは指定位置から探してデコードし、その位置以降で最初に得られるフレームを保存します。動画のフレームはすべてのミリ秒にあるわけではないため、隣のフレームになることがあります。指定より後ろに着地した場合は実際の時刻をそのまま表示するので、前後に微調整できます。

動画をスクリーンショットするのと何が違いますか?

スクリーンショットが写すのはプレイヤーであってファイルではありません。表示されていたサイズそのままで、途中でブラウザがかけた拡大縮小や色処理も乗り、再生コントロールが写り込むこともあります。ここではファイルから直接デコードするので、4K の録画からは何も重なっていない 4K の静止画が出ます。

1 秒ごとにフレームを抜き出すには?

間隔指定のモードに切り替え、間隔を 1 にしてください。選んだ範囲を順に進みながら 1 枚ずつ抜き、それぞれのタイムスタンプを表示します。1 回あたり 200 枚が上限なので、長い録画は区間を分けるか間隔を広げるほうが向いています。

形式はどれを選べばよいですか?

あとで編集、切り抜き、色の取得をするなら PNG です。可逆圧縮なので、デコードしたフレームがそのまま残ります。サムネイルやプレビューなら JPEG か WebP で、動画がすでに受けた圧縮の上にもう一度非可逆圧縮がかかる代わりに、ファイルがずっと小さくなります。WebP は同程度の設定なら JPEG よりやや小さく、現行のブラウザはどれも読めます。

動画はどこかにアップロードされますか?

いいえ。エンジンは WebAssembly にコンパイルされた FFmpeg で、ブラウザのタブ内で動きます。ファイルはディスクからタブのメモリへ読み込まれ、静止画はダウンロードとして書き出されます。ネットワークを通るものはなく、抽出中にネットワークパネルを開けばご自身で確認できます。

一度に何枚まで抜けますか。時間はどのくらいかかりますか?

1 回あたり 200 枚までです。1 枚ごとにシークとデコードを行うため、コーデック、解像度、動画の長さ、端末の性能によって時間は変わります。大きなファイルは最初にメモリへ読み込む時間がかかるので、長尺や高解像度の素材では範囲か出力幅を小さくして始めると安心です。

フレーム番号で指定できますか?

直接はできません。入力も結果も時刻を基準にします。元のフレームレートが読めれば、スライダーと矢印は 1 フレーム分の間隔で動くため、近くを調整しやすくなります。とくに可変フレームレートの動画では、各画像の横に出る実際の時刻を確認してください。

プレビューで見えている絵と抜いた画像が違って見えるのはなぜですか?

プレビューはブラウザ自身が動画をデコードして小さなプレイヤーに縮めて表示したもので、ブラウザ側の色処理も乗っています。静止画はそれとは別に FFmpeg が元の解像度でデコードしたものです。プレビューは位置決めのためのもので、保存対象そのものではありません。

サムネイルに向いたフレームを自動で選んでくれますか?

いいえ、これは意図的に外しています。自動のシーン検出が選ぶのは前後との差が大きいフレームで、良いサムネイルを選ぶこととは別物ですし、実現するには動画を通してデコードする必要があります。等間隔で十数枚抜いて自分で選べば数秒で済み、しかも本当に欲しかった 1 枚が手に入ります。

関連ツール

ブラウザ内だけで動画と画像を扱うツールをほかにもそろえています。