容器内的 HTML 视频错误控制 webkit 中的大小答案

【问题标题】：HTML video inside container wrong controls size in webkit容器内的 HTML 视频错误控制 webkit 中的大小
【发布时间】：2018-08-12 20:15:03
【问题描述】：

与这个问题有关：Video controls have wrong size in Safari iOS

Chrome 也有同样的问题（目前使用的是 Mac 版本 62），如果您将转换应用于容器或视频本身，实际上会显示不同（错误）的结果。

示例代码和小提琴：

<style>
#div1, #vid2 {
  transform:scale(0.25, 0.25);
}
</style>

<div id="div1">
<video width="560" height="322" id="vid1" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video>
</div>

<div id="div2">
<video width="560" height="322" id="vid2" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video>
</div>

https://jsfiddle.net/julifos/z45xz63w/38/

对于 mp4 和 webm 视频似乎是一样的。任何帮助将不胜感激！

好奇：控件的大小似乎取决于浏览器窗口的大小（使用不同的窗口大小运行相同的小提琴）。

【问题讨论】：

标签： html google-chrome video controls

【解决方案1】：

设置宽度尺寸并将高度尺寸留空将解决此问题。发生这种情况是因为如果您设置了两个维度，并且实际的视频维度不一样，它将使用一个维度缩放到最接近的适当比例，从而在视频播放器的唯一一个维度上留下空白边距。视频可以水平居中，也可以垂直居中，两边都有空白。

来自：Control bar wider than video in html5 + css

【讨论】：

感谢您的回答，但似乎不是有效的解决方法。如果您编辑示例小提琴并删除高度，您将看到行为没有变化。