固定高度的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视频拉伸

回答

相关问题