在html5视频元素中仅显示视频区域

Question

我想在html页面中仅显示视频的区域。这应该是给定的预先知道的像素区域（例如，大小为(5, 10)的视频的像素(670, 400)到(640, 480)。

有没有标准和/或方便的方法来做到这一点？

我发现只有以下来源：

• Zooming and rotating for video：使用CSS变换来操纵视频区域。它与隐藏我不想表现的部分无关。我猜我可以通过CSS的其他功能隐藏它，但它会隐藏我不想隐藏的视频元素的一部分 - 视频控件。
• Using Canvas to render each frame：它确实解决了问题，但视频元素的功能再次丢失（如视频控件）。此外，它需要手动重新渲染每个帧，我不确定它的性能成本。

有更好的主意吗？

Answer 1

只需正常添加视频，但将其放在div或span中。将该元素的样式设置为“overflow：hidden”，这将隐藏多余的元素，然后您可以设置高度宽度。

我用youtube剪辑做了一个例子，

<div id="video" style="width:200px; height:200px; overflow: hidden">
<iframe width="420" height="315" src="https://www.youtube.com/embed/kZAwXjidHmM" frameborder="0" allowfullscreen></iframe></div>

要移动视频并找到位置元素必须是绝对的或相对的。

position:relative; left:-120px; top:-120;