Question

我正在使用所需区域裁剪图像，您可以在“http://www.script-tutorials.com/demos/197/index.html”看到该演示，但我想使用视频代替图像，该怎么做？我曾尝试使用以下代码，但没有任何反应。任何人都可以帮忙吗？

 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>html5 : how to crop a video tag into a canvas tag</title>
 <script type="text/javascript">
 function onLoadEvent() {
function loop(){
 var video = document.getElementById('video');
 ctx.drawImage(video, 320, 0, 320, 180, 0, 0, 640, 360);
 setTimeout(loop, 1000 / 30);
 }
var canvas = document.getElementById('cropCvs');
 var ctx = canvas.getContext('2d');
loop();
 }
 </script>
 </head>
 <body onload="javascript:onLoadEvent()">
 <video
 id="video"
 height="360"
 width="640"
 autoplay
 controls
 src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_360p.webm?a"
 style="width: 640px; height: 360px; border: 1px solid black;">
 </video>
 <canvas
 id="cropCvs"
 height="360"
 width="640"
 style="width: 320px; height: 180px; border: 1px solid black;">
 </canvas>
 </body>
 </html>

如何在mousemove上制作视频裁剪

0 个答案: