我正在使用以下 CSS 在响应式 HTML5 页面上以全宽 (100%) 显示视频。视频的原始尺寸为 480x270。在保持纵横比不变的情况下，视频会在所有桌面浏览器上缩放以填满页面的整个宽度。
但是，我的 iPad (iOS 6.0.1) 上的 Mobile Safari 和 Chrome 显示了一个与页面宽度相同的黑色矩形。该视频很小，并以其原始大小 (480x270) 显示在黑色矩形的中心。
video {
width: 100%;
max-width: 100%;
height: auto;
}
灵感来自 http://webdesignerwall.com/tutorials/css-elastic-videos .此页面上有一条评论让我相信 iOS6 中存在回归。
Since upgrading my iPad to iOS 6 this fix doesn’t seem to work any more, I think it’s height: auto causing the issue. Anyone experienced similar and have a fix?
还有其他人遇到这个问题吗？我 有什么方法可以在 iPad (iOS6) 上全宽显示 HTML5 视频，同时仅使用 CSS 保持纵横比？
HTML如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="file.mp4" type="video/mp4">
<source src="file.webm" type="video/webm; codecs=vp8, vorbis">
<source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
最佳答案
我在这里看到两个问题:
Mobile Safari 不会为您计算视频尺寸(或纵横比)。您必须在元素属性或 CSS 中指定高度和宽度，因为在您开始播放之前它根本不会下载视频文件头。参见 this page , 第三部分。
即使您这样做了，浏览器似乎也不会在意。当您将它设置为自动时，它会回到默认高度 150 像素。老实说，我不知道为什么。这可能是一个错误。但是……
...有一个解决方法。
iOS 似乎没有与 Canvas 相同的问题。因此，您可以将 Canvas 和视频放在一个 div 中，该 div 设置为 position: relative。像您的视频一样缩放 Canvas 。将视频设置为 position: absolute 并将高度和宽度都设置为 100%。这样， Canvas 将强制 div 成为您想要的大小，视频将扩展以填充 div。
这里的工作示例:http://jsbin.com/ebusok/135/
关于html - iPad (iOS6) 上的 Safari 不会缩放 HTML5 视频以填充 100% 的页面宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14250583/