HTML5 视频播放器帧宽问题

Question

因此，在我的网站上会有多个视频，它们都具有不同的内容，由用户提交并上传到网站。

用户上传的一些视频有不同的帧宽和高。

例如：

（视频 1）- 帧宽：1280。

（视频 2）- 帧宽：480。帧高 360。

问题在于，当使用具有不同帧高度的视频时，实际的 HTML5 视频本身会改变它的 高度。它变得更小或更大，我不希望这样，我希望所有视频保持相同的大小，无论视频帧高度如何。

和 Youtube 一样，所有视频的宽度和高度都完全一样，我想要它。

为了让大家更清楚我的意思，我在下面提供了一个指向 html 文件的链接： https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk .

注意：我几乎尝试了所有方法，更改了 100 万次 CSS 代码，尝试了 3rd 方应用程序，但没有什么能满足我的需求。

最好的问候，谢谢。

Answer 1

为了使所有视频的大小相同，您需要拉伸视频（通常不好，不要这样做）或在顶部/底部或侧面添加条形以显示原始视频尺寸。对于 html5 视频，您需要做的就是为视频标签应用宽度和高度。

<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>

在您的源文件中尝试此操作，它将使您的所有视频大小相同，并且只会在文件中添加条形以使它们都占用相同的空间（注意它是如何添加到顶部/底部的一个，而侧面在另一个）。

如果您的视频文件具有不同的宽高比，即使 youtube 也会这样做（您会注意到这些 youtube 视频上的黑条，例如：https://www.youtube.com/watch?v=2Or1Ui7yM7Q 此视频是在方形显示器上拍摄的，并且不是宽屏）。