Javascript 裁剪HTML格式的视频？

我想在HTML5中裁剪视频

<video id="glass" width="640" height="360" autoplay>
    <source src="invisible-glass-fill.mp4" type="video/mp4">
</video>

---

视频的分辨率是640x360，但当我将

宽度属性设置为200时，视频将重新缩放（保留纵横比）。如何通过HTML或Javascript裁剪视频（例如，从左侧和右侧截取220个像素）？甚至可以不通过视频编辑软件裁剪视频吗？
您可以使用画布并复制您喜欢的视频部分。
这里有一些参考资料：
我建议您使用CSS和包装器：

HTML

<div class="container">
    <video id="glass" width="640" height="360" autoplay>
        <source src="invisible-glass-fill.mp4" type="video/mp4">
    </video>
</div>

我用另一种方法解决了同样的问题：

我刚刚用一个在线工具剪辑了视频：

这有两个优点：

比创建画布更快的是，考虑它们的样式和响应能力
更小的视频文件->更少的数据传输
我知道这不是你想要的，但也许它能帮助其他人看到这篇文章。
我也遇到了同样的需求（想要在运行中裁剪视频，而不是裁剪实际的视频）

我的解决方案非常简单，因此您不需要以绝对值指定容器的高度或宽度，因此它具有响应性。为了简单起见，我刚刚使用了内联样式，但是您可以轻松地将css移动到类等



在这个例子中，我使用了百分比中的负边距。请记住，使用百分比时，它们是基于容器的宽度计算的。所以这不是视频高度的10.5%。我认为如果你想这样做，你需要使用javascript。但是，通过这种方法，您也可以使用
vh
或
vw
装置。或者按照Alvaro的建议，在容器上设置宽度（如果您希望容器的大小是绝对的），然后使用
px
设置边距

查看更多示例
 您尝试设置了
高度：auto
？我们必须定义一个额外的CSS规则来向左移动视频，以确保视频在两侧都被剪切。我们可以这样做：
div.container video{margin left:-220px；}
。然而，这个答案让我找到了解决办法。@McEmperon是的，你是对的。我忘了那件事。很高兴知道这有帮助。我将用您的贡献更新答案。请注意，您需要在
div.container
内部设置
video
标记的
margin left
属性，而不是
div.container
本身的
margin left
属性。你需要编辑你的答案
div.container视频{margin left:-220px；}
@mcemperon我的错误：）完成。我使用了
position:relative；左：我的
视频
元素上的-220px
。我不知道它是比负边际好还是比负边际差，但它是有效的。
.container{
    width: 200px;
    overflow:hidden;
    display:block;
    height: 360px;
}
#glass{
    margin-left: -220px;
}