Question

是否可以在绝对定位的<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解决方案。

Answer 1

在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和right，而不是设置height和{{1 }}

Answer 2

（我知道这是一个老线程，但我希望我的答案可以帮助那些人。）

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

width: 100%; height: 100%的工作原理（注意分号）是，即使<video>元素被拉伸，视频本身仍然保持其宽高比，并且在{{1}内部是letterboxed / pillarboxed } element：https://stackoverflow.com/a/4000946/5249519。

<video>的优势在于视频完全位于中心，而height: 100%视频则与容器顶部对齐。

另外，您应该将max-height: 100%设置为<video>。否则，默认为display: block，您会在视频底部为字体下划线获取一些空格：There is a 4px gap below canvas/video/audio elements in HTML5。

最后，就像@ gilly3所说的那样，你需要在display: inline之后加一个分号。当然，您需要删除background-color: #000。 =）

以下是完整的解决方案：

＆＃13;

display: none

＆＃13;

/*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%;
}

＆＃13;

在＆＃34;完整页面＆＃34;中运行代码段。模式并调整浏览器窗口大小以查看信箱效果。

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

希望有所帮助。

Answer 3

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

这个链接可能有助于理解某些事情 Height equals width Pure 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即可更改比率。

Answer 4

您应该使用此 CSS 来获得正确的解决方案- 如果您使用 n，它会覆盖您的容器。

height: auto;

完全响应的HTML5视频

4 个答案: