jQuery 在 HTML 中裁剪视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18716077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Crop video in HTML?
提问by MC Emperor
I want to crop a video in HTML 5.
我想用 HTML 5 裁剪视频。
<video id="glass" width="640" height="360" autoplay>
<source src="invisible-glass-fill.mp4" type="video/mp4">
</video>
The resolution of the video is 640x360, but when I set the widthattribute to 200, the video will rescale (retain the aspect ratio). How to crop the video (cut off, say, 220 pixels from both the left and right side) through HTML or Javascript? Is it even possible without cropping the video through video editing software?
视频的分辨率是 640x360，但是当我将该width属性设置为 200 时，视频将重新缩放（保持纵横比）。如何通过 HTML 或 Javascript 裁剪视频（从左侧和右侧剪下 220 像素）？甚至可以不通过视频编辑软件裁剪视频吗？
回答by Alvaro
I would recommend you to do it with CSS and a wrapper:
我建议你用 CSS 和一个包装器来做：
HTML
HTML
<div class="container">
<video id="glass" width="640" height="360" autoplay>
<source src="invisible-glass-fill.mp4" type="video/mp4">
</video>
</div>
CSS
CSS
.container{
width: 200px;
overflow:hidden;
display:block;
height: 360px;
}
#glass{
margin-left: -220px;
}
回答by syd619
What you could do is use canvas and copy a the portion of the video you like. Here is some reference: http://developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/
您可以做的是使用画布并复制您喜欢的视频部分。这里有一些参考：http: //developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/
回答by iilllillllii
I solved the same problem with another approach:
我用另一种方法解决了同样的问题：
I just cropped the video using an online tool: https://ezgif.com/crop-video
我只是使用在线工具裁剪了视频：https: //ezgif.com/crop-video
This has 2 advantages:
这有两个优点：
- faster then creating canvases, think about their styling and responsiveness
- smaller video file -> less data transfer
- 比创建画布更快，考虑它们的样式和响应能力
- 较小的视频文件 -> 较少的数据传输
I know that this is not what you asked for, but maybe it helps some other folks, coming across this post.
我知道这不是你所要求的，但也许它可以帮助其他人，遇到这篇文章。
