thi*_*hod 33 html5 mobile-safari html5-video responsive-design
我正在使用以下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>
bri*_*rls 51
我在这里看到两个问题:
Mobile Safari不会为您计算出您的视频尺寸(或宽高比).您必须在元素属性或CSS中指定高度和宽度,因为在您开始播放之前,它根本不会下载视频文件标题.请参阅本页,第三部分.
即使你这样做,浏览器似乎并不关心.当您将其设置为自动时,它将恢复为默认高度150px.老实说,我无法弄明白为什么.这可能是一个错误.但...
......有一个解决方法.
iOS似乎没有与画布相同的问题.因此,您可以将画布和视频放在div中,该div设置为position: relative.像对待视频一样缩放画布.将视频设置为position: absolute和高度和宽度均为100%.这样,画布将强制div为您想要的大小,视频将展开以填充div.
这里的工作示例:http://jsbin.com/ebusok/135/
emp*_*lls 15
结合部分@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;
}
| 归档时间： |
|
| 查看次数： |
30827 次 |
| 最近记录： |