Обрезать видео в 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, то видео будет масштабировать (сохраняя пропорции). Как обрезать видео (отрезать, скажем, 220 пикселей как с левой, так и с правой стороны) через HTML или Javascript? Возможно ли это без обрезки видео через программное обеспечение для редактирования видео?

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

Answer 2

Что вы можете сделать, это использовать холст и скопировать часть понравившегося вам видео. Вот некоторые ссылки: http://developertip.wordpress.com/2011/06/04/tuto-html5-how-to-crop-a-video-tag-into-a-canvas-tag/