35

我正在使用以下 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>
4

5 回答 5

53

我在这里看到两个问题：

  1. 移动 Safari 不会为您计算出您的视频尺寸（或纵横比）。您必须在元素属性或 CSS 中指定高度和宽度，因为在您开始播放之前，它根本不会下载视频文件头。请参阅此页面，第三部分。

  2. 即使您这样做，浏览器似乎也不在乎。当您将其设置为自动时，它会返回到默认高度 150 像素。老实说，我不知道为什么。这可能是一个错误。但...

...有一个解决方法。

iOS 似乎对画布没有同样的问题。因此，您可以将画布和您的视频放在一个 div 中，该 div 设置为position: relative. 像缩放视频一样缩放画布。将视频设置为position: absolute，高度和宽度都设置为 100%。这样，画布将强制 div 为您想要的大小，并且视频将扩展以填充 div。

此处的工作示例：http: //jsbin.com/ebusok/135/

于 2013-01-11T05:43:37.690 回答
16

结合@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;
}
于 2014-01-17T19:27:14.043 回答
1

我有一个与 IOS6 类似的场景，并且一个视频对象没有调整到它的父级。我通过使用 CSS 定位包含视频的父 div 中的所有元素来解决它。因此，在您的示例中，您必须用 div 包围您的视频（例如 class="DivWithVideo"）并添加以下 CSS：

 .DivWithVideo * {max-width: 100%}
于 2014-01-07T13:08:36.043 回答
0

我不得不对用户上传的视频做类似的事情。这意味着：我不知道视频的分辨率，它甚至可能是纵向模式。

我的解决方法是在加载元数据时通过 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，我想看看......

于 2013-09-18T13:17:50.810 回答
0

您可以使用它来根据需要将视频设置在具有边距的容器中。无需添加额外的元素。专门修复 iOS 7。如果需要，请注意-webkit-calc前缀

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);
于 2015-11-05T12:40:57.720 回答