HTML5视频标签的宽度和高度

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>