完全响应式 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 解决方案。

原文由 Chuck Le Butt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 <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 之后缺少分号。 When absolutely positioning an element to fill the screen, I prefer to set top , bottom , left , and right instead of setting height 和 width 。

原文由 gilly3 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的示例视频。

希望有所帮助。

原文由 DynamicDispatch 发布，翻译遵循 CC BY-SA 3.0 许可协议