固定高度的HTML5視頻拉伸

我不需要保留原始高寬比。

下面是我使用的代碼：

<video width="100%" height="314" autoplay loop> 
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4"> 
</video>

此外，JSFiddle：

有什麼建議？

來源

2015-12-14 user5336878

該解決方案不起作用。 jsfiddle：http://jsfiddle.net/LCfiddle/Lvcvpdgw/4/ – user5336878

您現在處於關閉狀態，您只需要將height: auto或完全刪除即可。關於您的寬度，如果您對需要展開的寬度有限制，則可以通過max-width和min-width指定此寬度。我建議最小寬度不要小於320px，因爲這是您需要支持的最小屏幕。

編輯與OP對這個問題的具體工作之後，我們已經確定，維持對HTML5 Video Stretch固定的高度;你需要以下包裝代碼：

<div style="overflow: hidden; width: 100%; height: 314px;"> 
    <video height="auto" width="100%" autoplay loop> 
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4"> 
    </video> 
</div>

凡overflow: hidden，width: 100%和height: 314px被保留用於內部video元素。

來源

2015-12-14 17:33:05 AGE

如果我將高度設置爲「自動」，圖像就會比我需要的314像素高度更高。 – user5336878

@ user5336878由於video元素的性質，您需要保持一定的寬高比，這意味着您無法做到您想要的（固定高度，流體寬度），請閱讀以下內容：http://stackoverflow.com/questions/26472736/html5-video-with-fixed-height-but-scale-width-to 100 – AGE

在這個例子中，視頻將被用作一個稍微不透明的圖像的抽象背景。我不需要清楚地看到它。 – user5336878

固定高度的HTML5視頻拉伸

回答

相關問題