javascript - 完全响应式 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> 上元素:

<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>

video {
    width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/fHG69/

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