iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度
Posted
技术标签:
【中文标题】iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度【英文标题】:Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width 【发布时间】:2012-12-24 09:46:21 【问题描述】:我正在使用以下 CSS 在响应式 html5 页面上以全宽 (100%) 显示视频。视频的原始尺寸为 480x270。在保持宽高比不变的情况下,视频会缩放以填满所有桌面浏览器上的整个页面宽度。
但是,我的 iPad (ios 6.0.1) 上的 Mobile Safari 和 Chrome 显示一个与页面宽度相同的黑色矩形。视频很小,并以其原始尺寸 (480x270) 显示在黑色矩形的中心。
video
width: 100%;
max-width: 100%;
height: auto;
灵感来自http://webdesignerwall.com/tutorials/css-elastic-videos。此页面上有一条评论让我相信 iOS6 中存在回归。
自从将我的 iPad 升级到 iOS 6 后,这个修复似乎不再起作用,我认为是 height: auto 导致了这个问题。有没有人遇到过类似情况并有解决办法?
还有其他人遇到这个问题吗?一世 有什么方法可以在 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>
【问题讨论】:
您的视频标签是否具有高度和宽度属性?如果您愿意分享您的 html 代码,我或许可以提供帮助。 谢谢!请参阅上面原始帖子的编辑。 您的视频是否位于另一个尺寸固定或受限的元素中?也许是一个具有固定或最大高度的 div? 感谢您的建议。我编写了一个基本的 HTML 文件,其中只包含 video 标签和 video 元素的 CSS(见上文)。它在桌面浏览器上可以正确显示,但在 iPad 上视频仍然是其原始尺寸 (480x270)。 我建议加入*** for Multimedia Systems 【参考方案1】:我在这里看到两个问题:
Mobile Safari 不会为您计算视频尺寸(或纵横比)。您必须在元素属性或 CSS 中指定高度和宽度,因为在您开始播放之前,它根本不会下载视频文件头。参见this page,第三部分。
即使您这样做,浏览器似乎也不在乎。当您将其设置为自动时,它会返回到默认高度 150 像素。老实说,我不知道为什么。这可能是一个错误。但是……
...有一个解决方法。
iOS 在画布上似乎没有同样的问题。因此,您可以将画布和视频放置在设置为position: relative
的 div 中。像缩放视频一样缩放画布。将视频设置为position: absolute
,将高度和宽度都设置为 100%。这样,画布将强制 div 成为您想要的大小,并且视频将扩展以填充 div。
此处的工作示例:http://jsbin.com/ebusok/135/
【讨论】:
干得好!我没有想到 Safari 不会下载视频元数据这一事实,但它确实有道理。感谢您的解决方法。我希望我有足够的积分给你一个赏金! 您好,这修复了我的 iPad 视频,但它在 ie9 上引起了问题,我猜画布在 ie9 上的行为有所不同,这里有什么提示吗? @321zeno 你可以在 IE9 中使用条件 cmets 隐藏画布 干杯,这正是我最后所做的,有点乱但现在会做 嘿 jsbin 似乎已经死了,有机会重新发布链接吗?【参考方案2】:结合@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;
【讨论】:
谢谢。我有身高问题,这似乎已经解决了。非常感谢!【参考方案3】:我在 IOS6 中遇到过类似的情况,并且视频对象没有调整到其父对象的大小。我通过使用 CSS 定位包含视频的父 div 中的所有元素来解决它。因此,在您的示例中,您必须用 div 包围您的视频(例如 class="DivWithVideo")并添加以下 CSS:
.DivWithVideo * max-width: 100%
【讨论】:
【参考方案4】:我不得不对用户上传的视频做类似的事情。这意味着:我不知道视频的分辨率,它甚至可能是纵向模式。
我的解决方法是在加载元数据时通过 javascript 设置高度。对于大多数浏览器,视频的大小从一开始就正确;在 iPad 上,用户点击播放时会调整视频大小。对我来说,只要我知道它必须有多大,就让视频增长是可以的。
代码(使用 object.id 是因为在我的设置中,同一页面上可能有多个视频):
<script type="text/javascript">
// set height and width to native values
function naturalSize_ object.id ()
var myVideo = document.getElementById('video- object.id ');
var ratio = myVideo.videoWidth / myVideo.videoHeight;
var video_object = $('#video- object.id ');
video_object.animate(
height: (video_object.width() / ratio) + "px"
, 1000);
$(document).ready(function()
var myVideo = document.getElementById('video- object.id ');
myVideo.addEventListener('loadedmetadata', naturalSize_ object.id , false);
)
</script>
如果有人有更简洁的解决方案,也许是纯 CSS,我想看看...
【讨论】:
【参考方案5】:您可以使用它来将您的视频设置在容器中,并根据需要设置边距。无需添加额外的元素。专门针对 iOS 7 进行修复。需要注意-webkit-calc
前缀
width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);
【讨论】:
以上是关于iPad (iOS6) 上的 Safari 无法缩放 HTML5 视频以填充 100% 的页面宽度的主要内容,如果未能解决你的问题,请参考以下文章
iPad Safari 应用程序的cornerRadius 值是多少?
Safari iOS13 iPad 上的全屏 PWA 具有带阅读器和“完成”按钮的 URL 栏,无法隐藏
Websql 排队执行 - iOS6 Mobile Safari