HTML5视频标签宽度和高度

Question

HTML5视频标签宽度和高度

10

大家好，我在我的网站上有一些视频播放，我希望它可以播放 width: 100%; height: 600px; 但是到目前为止我尝试过的一切都没有奏效。

当我设置了 height: 600px; 视频的宽度也会成比例变化。我基本上想要实现与background-size: cover相同的效果，并且高度为600像素。我正在使用内联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>

- user3150191

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Senju · Accepted Answer

实现此操作的一种方法是将视频包装在一个 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>

请注意，如果视频的高度与宽度比例大于600像素，则可能会被裁剪底部，并且当您拉伸窗口时，视频将被切割得更多。

这是一个使用此代码的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>