用 HTML 裁剪视频？答案

【问题标题】：Crop video in HTML?用 HTML 裁剪视频？
【发布时间】：2013-09-13 23:53:21
【问题描述】：

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

【问题讨论】：

你试过设置height:auto ?

标签： javascript jquery html html5-video

【解决方案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;
}

【讨论】：

我们必须定义一个额外的 CSS 规则来将视频向左移动，以确保视频两边都被裁剪。我们可以这样做：div.container video { margin-left: -220px; }。然而，这个答案让我找到了解决方案。
@MCEmperor 是的，你是对的。我忘记了那个必要条件。很高兴知道它有帮助。我会用你的贡献更新答案。
请注意，您需要在div.container 内设置video 标记的margin-left 属性，而不是div.container 本身的margin-left 属性。您需要编辑您的答案。 div.container video { margin-left: -220px; }
@MCEmperor 我的错误 :) 完成。
我在video 元素上使用了position: relative; left: -220px。我不知道它是否比负边距更好或更差，但它有效。

【解决方案2】：

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

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

【讨论】：