Android Chrome上的HTML5视频控件在此简单页面中不会覆盖整个视频宽度
ala*_*lan 14 css android google-chrome html5-video
将其另存为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将使控件跨越视频的整个宽度按预期.但是,这两种样式的组合使得任何视频控件的大小都不正确,如图所示.
这个问题似乎有点相关,并建议transform: translateZ(0)在包含元素中添加一个,但是将该转换添加到正文上的现有转换或新的包含div上并不能解决问题.
这是Android Chrome中的错误吗？我不明白为什么这两种风格的结合会影响视频控制的宽度.
要更改视频播放器本机控件栏的宽度，您可以在 css 中添加以下内容：
video::-webkit-media-controls-panel {
width: 100%;
}
这是设置本机控件样式的好示例。我希望这可以帮助你。
| 归档时间： |
|
| 查看次数： |
819 次 |
| 最近记录： |