position: absolute;

選択されているタグ : video

タグを絞り込む : html5

HTML5のvideoとcanvasで動画のキャプチャを取る


このエントリーはGraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012の19日のエントリーになります。

先日CSS Nite LP, Disk 25:Webデザイン行く年来る年(Shift6)に参加しました。その時にこのAdvent Calendarを起こしたoyamadaさんにもう「ひとつエントリー書いて」と言われましたので、ちょっと小ネタですが19日めとして登録しておきます。

動画のキャプチャを取る方法は様々ありますけど、HTML5でも手軽な方法でできますよということで。

サンプル
※動画はW3Cのサイトで利用されていたものを拝借しました。

「snapshot」というボタンを押すと再生中の動画のキャプチャを撮ってHTML内に挿入します。imgタグで入ってますので大抵の環境であれば右クリックで保存できます。

コードの解説ですが

canvasContext.drawImage(videoElement,0,0);
// 座標関係はとりあえず0,0で

以上!これでcanvasに再生中のvideoのキャプチャが取り込まれます。
ちなみにimgタグにcanvasのデーターを反映させる方法ですが、

imageElement.src = canvasElement.toDataURL('image/png');
// 'image/png'は出力する形式に合わせてください

というわけでJavaScriptのサンプルはこちらです。はい、小ネタでした!