Обрезать видео в HTML?

Я хочу обрезать видео в HTML 5.

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

Разрешение видео 640x360, но когда я устанавливаю атрибут width на 200, видео будет масштабироваться (сохраняйте соотношение сторон). Как обрезать видео (отрезать, скажем, 220 пикселей как с левой, так и с правой стороны) через HTML или Javascript? Возможно ли это без обрезки видео через программное обеспечение для редактирования видео?

Ответ 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;
}