如何剪切 HTML5 视频顶部和底部的黑色区域？我尝试从代码中更改大小，但它拉伸了整个视频，我不想要拉伸，我只想剪切那些区域
<video autobuffer controls autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
【问题讨论】：
也许最简单的方法是使用容器 div 来“剪辑”视频元素：
创建一个容器 div，其大小适合视频的非黑色大小。
设为position:relative
设为overflow:hidden
将子视频元素添加到容器 div。
设为position:absolute。
设置视频元素的top: 和left: 属性，以便有效地剪掉黑色边栏
使用 html Canvas 的替代方法
如果您对由纵横比差异引起的黑色边栏感到非常恼火，您可以在 html5 画布上绘制视频的每一帧，然后剪裁画布以仅显示非边栏区域。这是一个有用的链接：http://html5doctor.com/video-canvas-magic/
这是可能的，因为视频元素可以用作画布的图像源。
// get a reference to the video element
var videoElement=document.getElementById('#myVideo');
// draw the current frame of the video element onto canvas
context.drawImage(videoElement,0,0);
.drawImage 方法有一个重载，可以让您剪切源的一部分并在画布上绘制该剪切部分。 .drawImage 的剪辑版本如下所示：
context.drawImage(
sourceImage,
sourceX, sourceY, sourceWidthToClip, sourceHeightToClip,
canvasX, canvasY, scaledWidth, scaledHeight );
在之前的 Stackoverflow 帖子中提供了 .drawImage 剪辑版本的注释说明：
HTML / Java Script Canvas - how to draw an image between source and destination points?
使用 html 画布可以，但需要更多编码。如果您需要为视频添加文本注释或需要显示视频的非矩形部分，您可以考虑使用 html canvas。
【讨论】：
问题在于视频具有一定的尺寸，并且它保持其比例（应有的比例）与您想要的尺寸不匹配。就像在电视上看电影一样，黑线也存在。
此外，autobuffer 属性已经过时多年，您不应该使用它，请改用preload 属性，例如preload="meta"
【讨论】：