代码之家 › 专栏 › 技术社区 › Paymahn Moghadasian

画布无法捕获整个视频帧

html5-video html5-canvas javascript

Paymahn Moghadasian · 技术社区 · 2 年前

我试图使用画布来提取/捕捉视频的帧,但它似乎不适用于某些视频。

Here is a JS fiddle 我发现了全帧捕捉的工作原理。但是,如果您将视频源更改为 http://www.w3schools.com/html/mov_bbb.mp4 到 https://public.lookielooapp.com/my-video.mp4 你会看到全帧拍摄不单击时工作 Capture 按钮

我尝试了各种不同的方法,比如设置视频和画布的高度和宽度属性 dx 和 dy 参数和更改视频的尺寸( https://public.lookielooapp.com/cropped.mp4 (480x120像素)和 https://public.lookielooapp.com/cropped2.mp4 (480x480像素))。这些解决方案都不起作用。

我如何才能让上面的小提琴正确地捕捉到我的视频的全帧?

1 回复 | 直到 2 年前

Nicole Forrester 2 年前

我通过将视频和画布设置为相同的尺寸来实现它: 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>

这只是一种预感,但似乎奏效了!

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前