Question

我为一位客户建立了一个网站，其中大部分内容都是视频。我使用HTML5视频元素来显示内容，但在iOS上使用Safari时遇到问题。

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

我试图让网站尽可能快速响应，因此这个默认大小对我不起作用。无论如何要解决这个问题，以便iOS上的Safari尊重视频大小？

Answer 1

我使用了以下适用于我的CSS。使用iOS 7.1在iPad mini上测试

video {
 min-height: 100%; 
 min-width: 100%; 
 height: auto !important;
 width: auto !important; 
}

Answer 2

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

基于视口单位

1vw =视口宽度的1％

获取基于宽高比的宽度百分比计算

如果您的视频是16：9

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

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

应用这些CSS规则

    video {
        width: 100% !important;
        height: 100% !important;
        max-height: 56.25vw !important;
    }

<video>
    <source src="video.mp4" type="video/mp4">
</video>

行为不当的iOS会被最大高度强迫不超过基于宽度的比例。

Answer 3

通过CSS，尝试给它宽度为100％，高度为auto。

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

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

我还没有对此进行过测试，但它应该引导您走上正轨。

Answer 4

尝试使用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 ...

Answer 5

我只是在视频标记的css规则中设置了修复宽度和高度，safari正确显示视频。

Safari IOS中的HTML5视频尺寸

5 个答案: