ロゴ
menu
HOME > ｊQuery・Javascript > 動画から静止画をキャプチャして保存する

動画から静止画をキャプチャして保存する

動画制作会社のクライアント様から、任意の秒数で動画を切り出して画像として保存したいとご相談されました。実際に作製したものはViemo動画を取り込んで複数のキャプチャ画像を保存し、PPTX形式の資料作成まで出来るものですが、今回はサーバーにある動画から一枚だけ保存する方法をご紹介します。

動画から画像をキャプチャするにはどうするか？

まずここで躓くと思うのですが、考え方としてはHTMLのcanvasへ動画をセットしてしまえば画像としてダウンロードすることが出来ます。

  1. 動画を再生して任意の位置で停止
  2. 動画をcanvasへセット
  3. ダウンロード

ざっくりこのような流れですが、ダウンロードされる画像はCanvasサイズに依存します。例えばフルHDサイズでダウンロードしたい場合、フルHDで表示している動画を同サイズのCanvasへセットすればOKです。

但し、モニターサイズがフルHDじゃない方も当然いらっしゃいます。そこで、再生する動画は640*480と小さくし、同じ動画を配置した大きな動画(1920*1080)を別に配置し、それをキャプチャして保存することにします。

サンプル

https://studio-key.com/Sample/video_captcha
ボタンを押すとキャプチャされますが、タイミングによって真っ黒な画像になることが有ります。
※レスポンシブは考慮していませんのでご留意下さい。

HTMLソース

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
<!-- 再生用の動画 -->
<div id="vi_video_wrap">
    <video id="video" width="640" height="480" controls><source src="video.mp4" type="video/mp4"></video>
  </div>
  <div id="button_wrap"><button>キャプチャする</button></div>
   
<!-- キャプチャ用のCanvas -->
  <div id="thumbnail_capcha" class="displaynone"><canvas class="captcha_canvas" id="captcha_canvas" width="1920" height="1080"></canvas></div>
<!-- キャプチャ用の大きな動画-->
  <video id="set_video" class="displaynone" width="1920" height="1080" controls><source src="video.mp4" type="video/mp4"></video>

再生用の動画、キャプチャ用のCanvas、キャプチャ用の大きな動画の3つを配置しています。なおキャプチャ用はCSSで非表示にしていますので見えません。

Javascriptソース

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.addEventListener('DOMContentLoaded', function(){
  let video = document.getElementById('video');
 
  //キャプチャボタンが押されたら処理
  document.querySelector("button").addEventListener('click', function(e){
    let canvas = document.querySelector("#captcha_canvas");
    let context = canvas.getContext('2d');
 
    //キャプチャ用のvideoに動画をセットし、再生秒数を進める
    let set_video = document.querySelector("#set_video");
        set_video.currentTime = video.currentTime;
 
    //少し遅延させてからキャプチャ処理
    setTimeout(function(){
      context.drawImage(set_video, 0, 0, canvas.width, canvas.height);
      //Aタグを挿入して画像をダウンロード
      let dataURL = canvas.toDataURL('image/png');
      let a = document.createElement('a');
      a.href = dataURL;
      a.download = 'image.png';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },1000);
 
  });
});

キャプチャボタンが押されたら現在の動画秒数を取得し、キャプチャ用動画の再生秒数を進めます。あとはそれをCanvasにセットしてpngとしてダウンロードしているだけです。

YoutubeやVimeoで可能か

今回はサーバーに有る動画でしたが、一般的にはYoutubeやVimeoなどの外部サービスに動画を登録して管理されるケースが多いと思います。結論から言うとYoutubeは出来ませんでした。Vimeoは条件次第で可能です。

それぞれのサービスが提供している動画のURLをCanvasへ指定することは出来ず、.mp4など動画ファイルのURLが必要なようです。Youtubeは動画を直接参照することは出来ません。対してVimeoは有料プラン会員はmp4のURLが提供されています。

Vimeoの動画IDとaccess tokenが有ればAPIで.mp4のURLを取得することも可能です。Vimeoで登録したサムネイル各種も取得出来ますので、それらを資料用とすることも出来ますね。

Canvasへ展開しますので、そこに手書きで文章を挿入することも出来そうです。動画制作現場の打ち合わせ等にも使えそうですね！

以上、動画を静止画としてキャプチャする方法のご紹介でした！