为啥我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？
Posted
技术标签:
【中文标题】为啥我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？【英文标题】：Why is there overflow for my H.264 video even though its dimensions are smaller than the browser window?为什么我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？ 【发布时间】：2022-01-10 11:12:48 【问题描述】： 我有一个 1280x720 视频（AAC、H.264，以防它很重要） 我的浏览器窗口是 1440x764 我有以下 CSS：#original-video
position: absolute;
top: 0;
left: 0;
<body>
<video id="original-video" playsinline>
<source src="/db/original.mp4" type="video/mp4">
</video>
<body>
然而，当视频在页面上渲染时，会出现垂直和水平溢出。这是没有意义的，因为视频的宽度和高度应该小于窗口的宽度和高度。
如何解决这个问题并让视频适合窗口？
编辑：我认为这是因为视频的高分辨率。尽管它“说”它是 1280x720，但渲染的尺寸实际上更大。但我不知道如何解决这个问题。
【问题讨论】：
【参考方案1】：将 CSS 更改为：
#original-video
position: absolute;
top: 0;
left: 0;
width: 77.2223%;
按比例调整视频大小以适合我的 1440x764 窗口。
所以这确实是由于视频的分辨率更高。
但我不知道这是否是解决此问题的正确方法，因此我暂时将其添加为答案，同时等待更有经验的人确认或提出更合适的解决方案。
【讨论】：
我也是这么想的。以 % 而不是 PX 为单位的宽度。以上是关于为啥我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？的主要内容，如果未能解决你的问题，请参考以下文章
如何在移动浏览器上通过 RTMP 显示 H.264 格式的视频直播？
如何（伪）流式传输 H.264 视频 - 以跨浏览器和 html5 方式？