完全响应的HTML5视频 [英] Fully responsive HTML5 video

问题描述

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

基本上，我正在寻找一种方法来确保视频尽可能大，但在调整窗口大小时也不会被裁剪--即使在IE9中也是如此。(注意：i视频必须保持其比例--所以如果有黑条也没问题。)

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

/*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解决方案。

推荐答案

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

/*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。

这篇关于完全响应的HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！