iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度 [英] Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
问题描述
我正在使用以下 CSS 在响应式 HTML5 页面上以全宽 (100%) 显示视频.视频的原始大小为 480x270.在保持纵横比的同时，视频会在所有桌面浏览器上缩放以填充页面的整个宽度.
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.
但是，我的 iPad (iOS 6.0.1) 上的 Mobile Safari 和 Chrome 显示一个与页面宽度相同的黑色矩形.视频很小，以原始大小 (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.
video {
width: 100%;
max-width: 100%;
height: auto;
}
灵感来自 http://webdesignerwall.com/tutorials/css-elastic-videos.此页面上有一条评论，让我相信 iOS6 中存在回归.
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.
自从将我的 iPad 升级到 iOS 6 后，此修复程序似乎不再起作用，我认为是高度:自动导致了问题.有没有人遇到过类似情况并有解决办法?
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 保留纵横比?
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?
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>
推荐答案
我在这里看到两个问题:
I see two problems here:
Mobile Safari 不会为您计算视频尺寸(或纵横比).您必须在元素属性或 CSS 中指定高度和宽度，因为在您开始播放之前它根本不会下载视频文件头.请参阅 本页，第三部分.
即使你这样做，浏览器似乎也不关心.当您将其设置为自动时，它会返回到默认高度 150 像素.老实说，我不明白为什么.这可能是一个错误.但是...
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 似乎没有与画布相同的问题.因此，您可以将画布和视频放置在设置为 position:relative 的 div 中.像视频一样缩放画布.将视频设置为 position: absolute 并将高度和宽度都设置为 100%.这样，画布将强制 div 成为您想要的大小，并且视频将扩展以填充 div.
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.
此处的工作示例:http://jsbin.com/ebusok/135/
这篇关于iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
