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

Question

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

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

我只找到了以下来源：

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

有更好的主意吗？

Answer 1

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

我用一个 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;