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 值是多少?

Javascript 提示未在 ipad 上扩展

Safari iOS13 iPad 上的全屏 PWA 具有带阅读器和“完成”按钮的 URL 栏,无法隐藏

Websql 排队执行 - iOS6 Mobile Safari

无法使用 SignalR 在 safari ipad/iphone 上的同一 Web 应用程序中同时打开 2 个选项卡

iPad Safari 上的下拉问题