ビデオからフレームをキャプチャし、HTML5 を使用してキャンバスに描画しようとしましたが、以下のコードが機能しません。スタートボタンをクリックすると、キャンバスが黒色で塗りつぶされます
<video src="video2.mp4" autoplay="true" type="video/mp4" width="300" height="200" id="vid">
</video>
<canvas id="cvs"> </canvas>
<button onclick="start()">Start</button>
<script>
var video=document.getElementById("vid");
var cvs=document.getElementById("cvs");
function start(){
cvs.getContext("2d").drawImage(video, 0, 0, 300,200);
}
</script>