在 HTML 中裁剪视频

Crop video in HTML?

本文关键字：视频 裁剪 HTML      更新时间：2023-09-26

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

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

尝试使用 CSS 属性：

object-fit: cover;

与Object-fit: contain;相反，这是您描述的默认设置，视频缩小以完全适合框内，顶部/底部或左侧/右侧没有裁剪和黑条。 object-fit: cover将覆盖整个视频框，并允许裁剪掉框外的额外数量。

在cover模式下，您可以像任何普通的HTML元素一样根据需要设置视频元素的宽度/高度，它将裁剪任何不适合中心/中心对齐

方式的内容。 
object-fit: cover;
object-align: center center; /* default, anchor to center of video */

如果要更改对齐方式，例如向顶部，右侧，底部，左侧等裁剪，只需另外使用object-position CSS属性即可。 例如，用object-align: top left"覆盖"object-fit会将左上角固定到位，覆盖整个视频框，放大以覆盖播放器设置的任何大小，并裁剪右侧或底部边缘之外的所有内容。

object-fit: cover; /* cover the whole video box, no black bars */
object-align: top left; /* anchor to top left corner of video */

object-align属性还可以获取除中心、顶部、底部、右侧、左侧关键字预设之外的像素或百分比值，以便在需要时更精确地使用它。

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

我的解决方案非常简单，因此您无需绝对指定容器的高度或宽度，因此它是响应式的。为了简单起见，我只是在这里使用了内联样式，但是您可以轻松地将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设置边距。

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

相关文章：