在HTML中裁剪视频？ [英] Crop video in HTML?

问题描述

我想在HTML 5中裁剪一段视频。

 < video id =glasswidth =640 height =360自动播放> 
< source src =invisible-glass-fill.mp4type =video / mp4> 
< / video> 
  

视频的分辨率是640x360，但是当我将宽度属性为200，视频将重新缩放（保留宽高比）。如何通过HTML或Javascript裁剪视频（例如，从左侧和右侧截取220像素）？是否有可能没有通过视频编辑软件裁剪视频？

解决方案

我会推荐你​​用CSS和封装：

HTML

 < div class =container> 
< video id =glasswidth =640height =360autoplay> 
< source src =invisible-glass-fill.mp4type =video / mp4> 
< / video> 
< / div> 
  

CSS

  .container {
 width：200px; 
 overflow：hidden; 
 display：block; 
身高：360px; 
} 
 #glass {
 margin-left：-220px; 
} 
  

I want to crop a video in HTML 5.

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

The resolution of the video is 640x360, but when I set the width attribute to 200, the video will rescale (retain the aspect ratio). How to crop the video (cut off, say, 220 pixels from both the left and right side) through HTML or Javascript? Is it even possible without cropping the video through video editing software?

解决方案

I would recommend you to do it with CSS and a wrapper:

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

这篇关于在HTML中裁剪视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！