30

是否可以在一个绝对定位的<video>元素中使用 HTML5 来调整窗口的宽度和高度，这样就不会裁剪任何内容？我见过的许多解决方案似乎都依赖于<iframe>我没有的标签，或者仅根据宽度调整大小（我已经可以做到）。

基本上我正在寻找一种方法来确保视频尽可能大，但如果调整窗口大小也永远不会被裁剪 - 即使在 IE9 中也是如此。（注意：我的视频必须保持它的比例——所以如果有黑条也没关系。）

这是我到目前为止所尝试的。

/*CSS*/

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
    z-index:999;
}
<!--HTML-->

<div id="player-overlay">
  <video width="100%" video="100%" style="width:100%, height:100%">
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

在我看来，我将尝试编写一个 JS 解决方案。

4

4 回答 4

42

在元素上使用width和：max-height<video>

/*CSS*/ 
video {
  width: 100%;
  max-height: 100%;
}
<!-- HTML -->

<div id="player-overlay">
  <video>
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

http://jsfiddle.net/fHG69/

此外，您在 . 之后缺少分号background-color。当绝对定位元素以填充屏幕时，我更喜欢设置top, bottom, left, andright而不是设置heightand width。

于 2013-11-05T19:14:44.020 回答
15

（我知道这是一个旧线程，但我希望我的回答对那里的人有所帮助。）

实际上，您已经有了正确的解决方案。在style="width:100%, height:100%"你的<video>作品上，除了你需要一个分号而不是逗号。（您可以删除多余的width="100%"和video="100%"属性。）

有效的原因width: 100%; height: 100%（注意分号）是，即使元素被拉伸，视频本身也会保持其纵横比，并且在元素<video>内部是信箱/柱箱： https ://stackoverflow.com/a/4000946/5249519 。<video>

的优点height: 100%是视频完全在中心进行信箱处理，而max-height: 100%视频与容器的顶部对齐。

此外，您应该将您的设置<video>为display: block. 否则，它默认为display: inline，您将在视频底部为字体下降部分获得一些空白：HTML5 中的 canvas/video/audio 元素下方有 4px 的间隙。

最后，就像@gilly3 所说，您需要在background-color: #000. 而且，当然，您需要删除display: none. =)

这是完整的解决方案：

/*CSS*/

#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}
<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

以“整页”模式运行代码片段并调整浏览器窗口大小以查看信箱效果。

顺便说一句，您的视频源不再有效，因此我使用了来自以下网址的示例视频： http: //techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5。

希望有帮助。

于 2016-06-20T02:48:57.243 回答
0

您应该将此 CSS 用于正确的解决方案 - 如果您使用height: auto;它将覆盖您的容器。

video {
  width: 100%;
  height: auto;
}
于 2021-01-05T04:30:51.973 回答
0

在尝试在响应式视频上找到其他内容时，我偶然发现了这个答案。我使用类似的代码实现了一个响应式视频元素。

这个链接可能有助于理解一些事情 高度等于宽度纯CSS

您的代码可能如下所示：

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // 50% equals a 2:1 ratio. you can read more about
                       // the ratios in the link
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

您可以通过简单地更改 before 伪元素上的 padding-top 来更改比率。

于 2017-09-19T21:31:41.620 回答