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