如何剪切 HTML5 视频顶部和底部的黑色区域？

Question

如何剪切HTML5视频顶部和底部的黑色区域？我尝试通过代码更改大小，但它拉伸了整个视频，我不想拉伸，我只想剪切那些区域

<video autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

http://jsfiddle.net/NpgD5/406/

Answer 1

问题是视频有一定的大小并且它保持的比例（应该如此）与您想要的大小不匹配。就像在电视上看电影一样，黑线也存在。

此外，属性 autobuffer 已经过时多年，您不应该使用它，请改用 preload 属性，例如preload="meta"

Answer 2

也许最简单的方法是 "clip" 使用容器的视频元素 div:

创建一个容器 div 大小为视频的非黑色大小。
成功position:relative
成功overflow:hidden
将子视频元素添加到容器 div。
做到position:absolute.
设置视频元素的 top: 和 left: 属性，以便有效地剪掉黑色边栏

另一种使用 html Canvas

如果您对宽高比差异导致的黑色边栏感到非常恼火，您可以在 html5 canvas 上绘制视频的每一帧并剪辑 canvas只显示非侧边栏区域。这是一个有用的link：http://html5doctor.com/video-canvas-magic/

这是可能的，因为视频元素可以用作 canvas 的图像源。

// 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 方法有一个重载，可让您剪辑源的一部分并在 canvas 上绘制剪辑的部分。 .drawImage 的裁剪版本如下所示：

context.drawImage( 
    sourceImage, 
    sourceX, sourceY, sourceWidthToClip, sourceHeightToClip, 
    canvasX, canvasY, scaledWidth, scaledHeight );

上一个 Whosebug post 上提供了 .drawImage 的剪辑版本的注释说明：

HTML / Java Script Canvas - how to draw an image between source and destination points?

使用 html canvas 可以，但需要更多编码。如果您需要向视频添加文本注释或需要显示视频的非矩形部分，您可以考虑 html canvas。

如何剪切 HTML5 视频顶部和底部的黑色区域？

how to cut black area on top and bottom of the HTML5 video?

html

css

video