Question

所有，我在我的网站上播放了一些视频，我希望它能播放width: 100%; height: 600px;，但到目前为止我没有尝试过任何视频。

当我设置height: 600px;时，视频的宽度是成比例的。我基本上想要达到与background-size相同的效果：cover，高度为600px。我正在使用内联CSS，并且该部分可以更改，但我更关心如何实现视频的自定义高度和宽度，如果可能的话。谢谢。

非常感谢任何帮助。这是我<video>

的代码

<video loop="loop" poster="img/waves1.jpg" style="width: 100%; height: 600px;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
</video>

Answer 1

实现此目的的一种方法是将视频包装在div中，并将其设为600px和overflow: hidden的高度。

例如：

<div style="width: 100%; height: 600px; overflow: hidden;">
    <video loop="loop" poster="img/waves1.jpg" style="width: 100%;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
    </video>
</div>

请注意，如果视频的比例高度大于600px，视频可能会向下切断，视频拉伸的次数越多，视频剪切的次数就越多。

以下是使用此代码的jsFiddle：

<div style="width: 100%; height:200px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="http://opcdn.battle.net/static/hearthstone/videos/home-header-bg.webm" type="video/webm"/>
    </video>
</div>

HTML5视频标签的宽度和高度

1 个答案: