25

我想用 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 像素）？甚至可以不通过视频编辑软件裁剪视频吗？

4

2 回答 2

37

我建议你用 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;
}
于 2013-09-10T10:12:43.300 回答
1

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

我的解决方案非常简单，并且可以工作，因此您不需要绝对指定容器的高度或宽度，因此它是响应式的。为了简单起见，我只是在这里使用了内联样式，但是您可以轻松地将 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。但是，通过这种方法，您也可以使用vhorvw单位。或者按照 Alvaro 的建议，在容器上设置宽度，如果您希望它具有绝对大小，并使用它px来设置边距。

查看此代码笔以获取更多示例！

于 2021-05-03T14:42:18.090 回答