iPad上的Safari（iOS6）无法缩放HTML5视频以填满100%的页面宽度_Html_Mobile Safari_Html5 Video_Responsive Design

iPad上的Safari（iOS6）无法缩放HTML5视频以填满100%的页面宽度

html responsive-design

iPad上的Safari（iOS6）无法缩放HTML5视频以填满100%的页面宽度,html,mobile-safari,html5-video,responsive-design,Html,Mobile Safari,Html5 Video,Responsive Design,我正在使用以下CSS在响应性HTML5页面上以全宽（100%）显示视频。视频的本机大小为480x270。在所有桌面浏览器上，视频都会被缩放以填充整个页面宽度，同时保持纵横比然而，我的iPad（iOS 6.0.1）上的Mobile Safari和Chrome显示了一个与页面宽度相同的黑色矩形。视频很小，在黑色矩形的中心以其本机大小（480x270）显示 video { width: 100%; max-width: 100%; height: auto; } 灵感来自。

我正在使用以下CSS在响应性HTML5页面上以全宽（100%）显示视频。视频的本机大小为480x270。在所有桌面浏览器上，视频都会被缩放以填充整个页面宽度，同时保持纵横比

然而，我的iPad（iOS 6.0.1）上的Mobile Safari和Chrome显示了一个与页面宽度相同的黑色矩形。视频很小，在黑色矩形的中心以其本机大小（480x270）显示

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

灵感来自。这一页上有一条评论让我相信iOS6出现了倒退

由于将我的iPad升级到iOS 6，这个补丁似乎不再有效，我认为是高度：自动导致了这个问题。有没有人有过类似的经历并有过修复

还有其他人遇到过这个问题吗？我有没有办法在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>


录像带{
宽度：100%；
最大宽度：100%；
高度：自动；
边框：1px纯红；
}

我在这里看到两个问题：

Mobile Safari无法为您计算视频尺寸（或纵横比）。您必须在元素属性或CSS中指定高度和宽度，因为在您开始播放之前，它根本不会下载视频文件头。见，第三节

即使你这么做了，浏览器似乎也不在乎。当您将其设置为自动时，它会返回到默认高度150px。老实说，我不明白为什么。可能是个虫子。但是

。。。有一个变通办法

iOS在画布上似乎没有同样的问题。因此，您可以将画布和视频放置在div中，该div设置为

位置：relative

。缩放画布就像缩放视频一样。将视频设置为

位置：绝对

，高度和宽度均设置为100%。这样，画布将强制div为您想要的大小，视频将展开以填充div

这里的工作示例：

我必须对用户上传的视频做类似的事情。这意味着：我不知道视频的分辨率，它甚至可能处于纵向模式

我的工作是在加载元数据时通过javascript设置高度。对于大多数浏览器来说，视频从一开始就大小正确；在iPad上，当用户点击play时，视频大小会进行调整。对我来说，只要我知道视频有多大，就可以让它增长

代码（使用object.id是因为在我的设置中，同一页面上可能有多个视频）：


//将高度和宽度设置为本机值
函数naturalSize{{{object.id}}（）{
var myVideo=document.getElementById（'video-{{object.id}}'）；
var比率=myVideo.videoWidth/myVideo.videoHeight；
var video_object=$（'#video-{{object.id}'）；
视频对象动画({
高度：（video_object.width（）/比率）+“px”
}, 1000);
}
$（文档）.ready（函数（）{
var myVideo=document.getElementById（'video-{{object.id}}'）；
addEventListener（'loadedmetadata'，naturalSize{{{object.id}}，false）；
})

如果有人有一个更干净的解决方案，也许是纯CSS，我希望看到它…

我有一个类似的场景，IOS6和一个视频对象没有调整到其父对象的大小。我通过将包含CSS视频的父div中的所有元素作为目标来解决这个问题。因此，在您的示例中，您必须使用div（例如class=“DivWithVideo”）包围视频，并添加以下CSS：

 .DivWithVideo * {max-width: 100%}

结合@brianchirls答案的一部分，以下是我所做的。到目前为止，这似乎在台式机、Android和iOS上都能正常工作。利用响应填充技巧，其中填充顶部的百分比将是宽度的百分比。我的视频是16:9，下面是我的代码：

#video-container {
 position: relative;
 padding-top: 56.25%;
}

video, object {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

您可以使用此选项在容器中设置视频中心，并根据需要设置边距。不需要添加额外的元素。特别修复iOS7。如果需要，请注意

-webkit calc

前缀

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);

您的视频标签是否具有高度和宽度属性？如果你愿意分享你的html代码，我可以帮你。谢谢！请参阅上面原始帖子的编辑。您的视频是否位于另一个维度固定或受限的元素中？也许是固定高度或最大高度的潜水舱？谢谢你的建议。我已经编写了一个基本的HTML文件，其中只包含视频标签和视频元素的CSS（见上文）。它在桌面浏览器上显示正确，但在iPad上，视频仍保持其原有大小（480x270）。我建议大家一起努力！我没有想到Safari不会下载视频元数据，但这是有意义的。谢谢你的解决方案。我希望我有足够的分数来奖励你！你好，这修复了我的iPad视频，但它在ie9上造成了问题，我想canvas在ie9上有不同的行为，这里有什么提示吗？@321zeno你可以在IE9Cheers中用有条件的评论隐藏canvas，这正是我最后所做的，有点混乱，但现在就可以了嘿jsbin apppears死了，有机会重新发布链接吗？谢谢。我有身高问题，这似乎已经解决了。非常感谢！

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);