Canvas does not capture entire frame of video-CodePudding

I'm trying to use a canvas to extract/capture the frame of a video but it seems to not work for certain videos.

Here is a JS fiddle I found in which the full frame capture works. However, if you change the video source from http://www.w3schools.com/html/mov_bbb.mp4 to https://public.lookielooapp.com/my-video.mp4 you'll see full frame capture does not work when you click the Capture button.

I've tried all sorts of different things like setting the height and width properties of the video and canvas, playing around with the dx and dy parameters and changing the dimensions of the video (https://public.lookielooapp.com/cropped.mp4 (480x120 pixels) and https://public.lookielooapp.com/cropped2.mp4 (480x480 pixels)). None of these solutions worked.

How can I get the above fiddle to correctly capture the full frame of a video of mine?

CodePudding user response：

I got it to work by setting both the video and the canvas to the same dimensions: https://jsfiddle.net/e1dfw59a/

<video id="video" src="https://public.lookielooapp.com/cropped2.mp4" type="video/mp4" controls height="200px" width="200px"></video><br/>
<button onclick="capture()">Capture</button> <br/><br/>
<canvas id="canvas" width="200px" height="200px"></canvas>

Was just a hunch but it seems to do the trick!