Question

我想在HTML 5中裁剪视频。

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

视频的分辨率为640x360，但当我将width属性设置为200时，视频将重新缩放（保留宽高比）。如何通过HTML或Javascript裁剪视频（切断，比如左右两侧220像素）？如果不通过视频编辑软件裁剪视频，甚至可以吗？

Answer 1

我建议你用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

.container{
    width: 200px;
    overflow:hidden;
    display:block;
    height: 360px;
}
#glass{
    margin-left: -220px;
}

Answer 2

您可以使用画布并复制您喜欢的视频部分。以下是一些参考：http://developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/

Answer 3

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

我只是使用在线工具裁剪了视频：https://ezgif.com/crop-video

这有两个优点：

然后更快地创建画布，考虑其样式和响应速度
较小的视频文件->较少的数据传输

我知道这不是您要的，但也许对其他人有所帮助。

Answer 4

我遇到了同样的需求（想要即时裁剪视频而不是裁剪实际视频）。

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

<div style="overflow: hidden;">
  <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" style="margin-top: -10.5%; margin-bottom: -10.5%"></video>
</div>

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

查看 this codepen 了解更多示例！

以HTML格式裁剪视频？

4 个答案: