完全响应的HTML5视频

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和width.

Answer 2

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

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

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

的优点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。

希望有帮助。