在这个简单的页面中，Android Chrome 上的 HTML5 视频控件不会跨越整个视频宽度
Posted
技术标签:
【中文标题】在这个简单的页面中，Android Chrome 上的 HTML5 视频控件不会跨越整个视频宽度【英文标题】：HTML5 video controls on Android Chrome don't span full width of video in this simple page 【发布时间】：2018-04-29 00:37:18 【问题描述】：将此保存为 html 文件并在 android Chrome 中加载：
<html>
<body style="overflow:hidden;transform: scale(0.5, 0.5);">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
</body>
</html>
应该是这样的：
如果您使用它，您会发现删除overflow:hidden 或transform:scale 将使控件按预期跨越视频的整个宽度。但是，这两种样式的组合会使任何视频控件的大小不正确，如图所示。
This question 似乎有些相关，并建议将transform: translateZ(0) 添加到包含元素，但是将该转换添加到主体上的现有转换或添加到新的包含 div 并不能解决问题。
这是 Android Chrome 中的错误吗？我不明白为什么这两种样式的结合会影响视频控件的宽度。
【问题讨论】：
添加视口有帮助吗？浏览器可能在每种情况下都发明了不同的视口大小。 其他浏览器/设备中的行为是否符合预期？ @JoshLee - 不幸的是，添加视口并没有帮助。在<head> 中添加<meta name="viewport" content="width=device-width, initial-scale=1"> 无效。 @mad.meesh - 是的。在任何桌面浏览器上，视频控件跨越视频的整个宽度。在我的 iPhone 6 plus 上也是如此。在 Android Firefox 上也是如此。这似乎仅限于 Android Chrome。
问题是视频控件没有被变换缩放？我已经在全高清手机上进行了测试，它工作正常......
我遇到了类似的问题，但这是由于 Bootstrap 轮播中的 <video> 元素设置为 width: 100%。如果我调整浏览器窗口的大小或单击“播放”控件，它会自行纠正（必须让渲染引擎或其他东西发痒）
【参考方案1】：
要更改视频播放器的原生控件栏的宽度，您可以在 css 中添加以下内容：
video::-webkit-media-controls-panel
width: 100%;
这里是样式原生控件的好example 。希望对您有所帮助。
【讨论】：
【参考方案2】：你可以把标签改成这样的
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
【讨论】：
【参考方案3】：您正在以非标准方式设置宽度和高度，尽管可能存在合理的错误，但您似乎将视频的宽度设置为原始宽度的一半。我建议您将样式设置为：
body
margin: 0;
overflow: hidden;
background-color: #000;
text-align: center;
video
display: inline;
height: 100vh;
<!doctype html>
<html>
<head>
<title>Some Video</title>
</head>
<body>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</body>
</html>【讨论】：
以上是关于在这个简单的页面中，Android Chrome 上的 HTML5 视频控件不会跨越整个视频宽度的主要内容，如果未能解决你的问题，请参考以下文章
如何在移动 Android 智能手机上的 Chrome 浏览器中进行“硬页面重新加载”
在Android Chrome浏览器上看不到一些utf8字符
网站背景在 Android 上显示不正确。 Chrome DevTools 没有反映这一点