javascript - 在 HTML 中裁剪视频？

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;
}