我想在html页面中只显示视频的区域。这应该是一个给定的预先知道的像素区域(例如，(640, 480)大小的视频的(5, 10)到(670, 400)像素)。
是否有标准和/或方便的方法来做到这一点?
我只找到以下来源:
- 视频缩放和旋转:使用CSS变换来操纵视频的区域。这与隐藏我不想展示的部分无关。我想我可以通过CSS的其他功能隐藏它，但是它会隐藏我不想隐藏的视频元素的一部分——视频控件。
- 使用Canvas来渲染每一帧:它确实解决了问题，但是再次失去了视频元素的功能(如视频控件)。此外，它需要手动重新渲染每帧，我不确定这是什么性能成本。
有更好的主意吗?
只需正常添加视频，但将其放在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;