6

我正在为一个主要内容是视频的客户建立一个网站。我正在使用 HTML5 视频元素来显示内容，但在 iOS 上的 Safari 时遇到问题。

iOS 上的 Safari 在用户启动下载之前不会下载视频元数据，因此视频的宽度和高度属性设置为默认大小 300 x 150 像素 - 在视频拉伸的两侧留下很大的黑色区域我的包含元素的宽度。

我正在尝试使网站尽可能地响应，所以这个默认大小对我不起作用。有没有办法解决这个问题，以便 iOS 上的 Safari 尊重视频大小？

4

5 回答 5

6

我使用了以下对我有用的 CSS。在装有 iOS 7.1 的 iPad mini 上测试

video {
 min-height: 100%; 
 min-width: 100%; 
 height: auto !important;
 width: auto !important; 
}
于 2014-04-10T04:30:29.173 回答
1

iOS 的解决方案可以用纯 CSS 来实现。这适用于<video>占用视口的宽度，这在移动设备中很常见。

  1. 基于视口单位

1vw = 视口宽度的 1%

  1. 获取基于纵横比的宽度百分比计算

如果您的视频是 16:9

9 除以 16 = 0.5625 = 56.25% = 56.25vw

如果您的视频是 4:3 和 21:9，则分别为 0.75 和 0.4285。

  1. 应用这些 CSS 规则

    video {
        width: 100% !important;
        height: 100% !important;
        max-height: 56.25vw !important;
    }
<video>
    <source src="video.mp4" type="video/mp4">
</video>

行为不端的 iOS 将被 max-height 强制不高于基于宽度的比率。

于 2020-03-27T01:29:00.393 回答
0

通过 CSS，尝试将其宽度设置为 100%，高度设置为 auto。

编辑 在这种情况下，您需要使用 JavaScript 等待视频加载元数据，然后读取并设置宽度和高度，例如：

var v = document.getElementById('myVideo');
v.addEventListener('loadedmetadata', function(e) {
   this.width = this.videoWidth;
   this.height = this.videoHeight;
}, false);

我还没有完全测试过这个，但它应该会引导你走上正确的轨道。

于 2013-04-18T09:39:46.627 回答
-1

尝试使用width:100%, height:0, padding-bottom:56.25%（对于 16:9 视频）来设置容器元素的大小

然后获取容器height/width来设置height/width视频元素：

var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
    the_case_study_video = document.getElementById('tw-case-study-hero-video'),
    the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
    the_width = $(the_case_study_video_wrapper).css('width');

$(the_case_study_video).css({
   'height': the_height,
   'width': the_width
});

然后可能在方向调整大小和/或浏览器调整大小时再次设置 css ...

于 2013-05-20T23:23:34.843 回答
-3

我只是在 css 规则中为视频标签设置了一个固定宽度和高度，Safari 可以正确显示视频。

于 2013-08-25T23:42:15.523 回答