Safari IOS 中的 HTML5 視頻尺寸

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

iOS 的解決方案可以用純 CSS 來實現。 這適用於占據視口寬度的<video> ，這在移動設備中很常見。

1. 基於視口單位

1vw = 視口寬度的 1%

2. 根據縱橫比獲取寬度百分比計算

如果您的視頻是 16:9

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

如果您的視頻是 4:3 和 21:9，則分別為 0.75 和 0.4285。

3. 應用這些 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 強制不超過基於寬度的比率。

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 可以正確顯示視頻。