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

也许最容易的是＆＃34;剪辑＆＃34;视频元素使用容器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画布。

Answer 2

问题是视频是一定的大小，并且保持其比例（应该），这与您想要的大小不匹配。它类似于在电视上观看电影，黑线也存在。

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

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

2 个答案: