html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング

デブサミ2010のhtml5セッションで見たデモ（Movement tracker）*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 １．videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =

[jar2]

canvas video

[kjw_junichi]

そうだよね、video要素をdrawImageすればOKなはずなのに。。 http://jsdo.it/kjunichi/i1b1

[hiro-rock]

HTML5のvideoで出力させた動画をcanvasで出力する モノクロにするサンプルもあった わかりやすい 簡単だなー

[efcl]

Videoタグ、任意フレームをCanvasで描画

[Cherenkov]

videoタグ