我正在使用以下CSS在响应式HTML5页面上以全宽(100%)显示视频.视频的原始大小为480x270.缩放视频以在所有桌面浏览器上填充页面的整个宽度,同时保持纵横比.
但是,iPad上的Mobile Safari和Chrome(iOS 6.0.1)显示的黑色矩形与页面的宽度相同.视频很小,并以黑色矩形中心的原始大小(480x270)显示.
video {
width: 100%;
max-width: 100%;
height: auto;
}
灵感来自http://webdesignerwall.com/tutorials/css-elastic-videos.在这个页面上有一个评论让我相信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>