iPad上的Safari（iOS6）不会缩放HTML5视频以填充页面宽度的100％ [英] Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
问题描述
我使用以下CSS在响应式HTML5页面上以全角（100％）显示视频。视频的原生尺寸为480x270。该视频在保持宽高比的同时，可以在所有桌面浏览器中填充整个页面宽度。
然而，我的iPad上的Mobile Safari和Chrome（iOS 6.0） 1）显示一个与页面宽度相同的黑色矩形。该视频很小，并以黑色矩形中心的原始大小（480x270）显示。 视频{
宽度：100％;
max-width：100％;
height：auto;
启发来自 http://webdesignerwall.com/tutorials/css-elastic-videos 。在这个页面上有评论让我相信iOS6有回归。
自从我的iPad升级到iOS 6后，这个修复程序没有似乎不再工作，我认为这是高度：汽车造成的问题。任何人都遇到类似的问题，并有修复？
是否有其他人遇到此问题？ I
有什么方法可以在iPad（iOS6）上全屏显示HTML5视频，同时只使用CSS保留宽高比？
HTML是如下：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta name =viewportcontent =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纯红色;
}
< / style>
< / head>
< body>
< video preload autoplay controls>
< source src =file.mp4type =video / mp4>
< source src =file.webmtype =video / webm; codecs = vp8，vorbis>
< source sr =file.ogvtype =video / ogg; codecs = theora，vorbis>
< / video>
我在这里看到两个问题：
-
Mobile Safari不会为您计算出您的视频尺寸（或宽高比）。您必须在元素属性或CSS中指定高度和宽度，因为在开始播放之前，它不会下载视频文件标题。参见此页面，第三部分。
-
即使您这样做，浏览器似乎也不在乎。当您将其设置为自动时，它会回到150px的默认高度。老实说，我不明白为什么。这可能是一个错误。但是...
...有一个解决方法。
iOS似乎没有与画布相同的问题。因此，您可以将一个画布和您的视频放置在div中，该div设置为 position：relative 。像对待视频一样缩放画布。将视频设置为位置：绝对以及高度和宽度均为100％。这样，画布会强制你的div的大小，并视频将扩大到填补div。
在这里工作示例：http://jsbin.com/ebusok/135/
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.
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.
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.
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?
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?
The HTML is as follows:
<!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>
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...
... 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: absolute and 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.
Working sample here: http://jsbin.com/ebusok/135/
这篇关于iPad上的Safari（iOS6）不会缩放HTML5视频以填充页面宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
