Html iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14250583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
提问by thisguyzaphod
I am using the following CSS to display a video in full width (100%) on a responsive HTML5 page. The native size of the video is 480x270. The video is scaled to fill the full width of the page on all desktop browsers while maintaining the aspect ratio.
我正在使用以下 CSS 在响应式 HTML5 页面上以全宽 (100%) 显示视频。视频的原始大小为 480x270。在保持纵横比的同时，视频会在所有桌面浏览器上缩放以填充页面的整个宽度。
However, Mobile Safari and Chrome on my iPad (iOS 6.0.1) shows a black rectangle with the same width as the page. The video is tiny and displayed in its native size (480x270) at the center of the black rectangle.
但是，我的 iPad (iOS 6.0.1) 上的 Mobile Safari 和 Chrome 显示一个与页面宽度相同的黑色矩形。视频很小，并以其原始大小 (480x270) 显示在黑色矩形的中心。
video {
width: 100%;
max-width: 100%;
height: auto;
}
inspired by http://webdesignerwall.com/tutorials/css-elastic-videos. There's a comment on this page which leads me to believe there is a regression in iOS6.
灵感来自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 升级到 iOS 6，此修复程序似乎不再起作用，我认为是 height: auto 导致了问题。有没有遇到过类似情况并解决的？
Is anyone else experiencing this problem? I there any way to display a HTML5 video in full width on the iPad (iOS6) while preserving the aspect ratio using CSS only?
还有其他人遇到这个问题吗？我有什么方法可以在 iPad (iOS6) 上以全宽显示 HTML5 视频，同时仅使用 CSS 保留纵横比？
The HTML is as follows:
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>
回答by brianchirls
I see two problems here:
我在这里看到两个问题：
Mobile Safari will not figure out your video dimensions (or aspect ratio) for you. You have to specify the height and width in the element attributes or CSS, because it's not going to download the video file header at all until you start playing. See this page, third section.
Even if you do that, the browser doesn't seem to care. When you set it to auto, it goes back to the default height of 150px. Honestly, I can't figure out why. It's probably a bug. But...
Mobile Safari 不会为您计算视频尺寸（或纵横比）。您必须在元素属性或 CSS 中指定高度和宽度，因为在您开始播放之前它根本不会下载视频文件头。请参阅此页，第三部分。
即使你这样做，浏览器似乎也不关心。当您将其设置为自动时，它会返回到默认高度 150 像素。老实说，我不明白为什么。这可能是一个错误。但...
... there is a workaround.
...有一个解决方法。
iOS does not seem to have the same problem with a canvas. So you can place a canvas and your video inside a div, which is set to position: relative. Scale the canvas as you would your video. Set the video to position: absoluteand height and width both to 100%. That way, the canvas will force the div to be the size you want, and the video will expand to fill the div.
iOS 在画布上似乎没有同样的问题。因此，您可以将画布和视频放在 div 中，该 div 设置为position: relative. 像视频一样缩放画布。将视频设置为position: absolute高度和宽度均为 100%。这样，画布将强制 div 成为您想要的大小，并且视频将扩展以填充 div。
Working sample here: http://jsbin.com/ebusok/135/
这里的工作示例：http: //jsbin.com/ebusok/135/
回答by emptywalls
Incorporating part of @brianchirls answer, here's what I did. This seems to be working so far on desktop, Android, and iOS. Take advantage of the responsive padding trick, where padding-top, as a percentage will be a percent of the width. My video is 16:9 so here's my code:
结合@brianchirls 的部分答案，这就是我所做的。到目前为止，这似乎适用于桌面、Android 和 iOS。利用响应式填充技巧，其中 padding-top 作为百分比将是宽度的百分比。我的视频是 16:9 所以这是我的代码：
#video-container {
position: relative;
padding-top: 56.25%;
}
video, object {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
回答by uknowit2
I had a similar scenario with IOS6 and a video object not resizing to its parent. I resolved it by targeting all elements within the parent div containing the video with CSS. So in your example you would have to surround your video with a div (eg class="DivWithVideo") and add the following CSS:
我有一个与 IOS6 类似的场景，一个视频对象没有调整到它的父对象。我通过使用 CSS 定位包含视频的父 div 中的所有元素来解决它。因此，在您的示例中，您必须用 div 包围您的视频（例如 class="DivWithVideo"）并添加以下 CSS：
.DivWithVideo * {max-width: 100%}
回答by Marius
I had to do something similar with user-uploaded videos. This means: I do not know which resolution the video has, it could even be in portrait-mode.
我不得不对用户上传的视频做类似的事情。这意味着：我不知道视频的分辨率，它甚至可能是纵向模式。
My work-around was to set the height via javascript when metadata is loaded. For most browsers the video is sized correctly from the beginning; on the iPad the video size is adjusted when the user hits play. For me it was okay to let the video grow as soon as I know how big it has to be.
我的解决方法是在加载元数据时通过 javascript 设置高度。对于大多数浏览器，视频的大小从一开始就正确；在 iPad 上，当用户点击播放时会调整视频大小。对我来说，一旦我知道它必须有多大，就可以让视频增长。
Code (object.id is used because in my setup there could be multiple videos on the same page):
代码（使用 object.id 是因为在我的设置中，同一页面上可能有多个视频）：
<script type="text/javascript">
// set height and width to native values
function naturalSize_{{ object.id }}() {
var myVideo = document.getElementById('video-{{ object.id }}');
var ratio = myVideo.videoWidth / myVideo.videoHeight;
var video_object = $('#video-{{ object.id }}');
video_object.animate({
height: (video_object.width() / ratio) + "px"
}, 1000);
}
$(document).ready(function() {
var myVideo = document.getElementById('video-{{ object.id }}');
myVideo.addEventListener('loadedmetadata', naturalSize_{{ object.id }}, false);
})
</script>
If someone has a cleaner solution, perhaps in pure CSS, I would like to see it...
如果有人有更干净的解决方案，也许是纯 CSS，我希望看到它......
回答by Sergey Sahakyan
you can use this to set center your video in container with margins as you want. no need to add extra element. fix for iOS 7 specially. pay attention to -webkit-calcprefixes if need
您可以使用它根据需要将视频设置在容器中并带有边距。无需添加额外的元素。专门针对 iOS 7 修复。-webkit-calc如果需要，请注意前缀
width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);
