完全响应的 HTML5 视频

Posted 2023-05-08

【中文标题】完全响应的 HTML5 视频

【英文标题】：Fully responsive HTML5 video

【发布时间】：2013-11-16 18:54:43

【问题描述】：

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

【问题讨论】：

css-tricks.com/NetMag/FluidWidthVideo/… -- Google 搜索的第二个结果。

这几天效果很好：embedresponsively.com

【参考方案1】：

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

【参考方案2】：

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

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

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

height: 100% 的优点是视频在中间被加了信箱，而max-height: 100% 的视频与容器的顶部对齐。

另外，您应该将<video> 设置为display: block。否则，它默认为display: inline，并且您会在视频底部为字体降序获得一些空白：There is a 4px gap below canvas/video/audio elements in HTML5。

最后，就像@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>

在“整页”模式下运行代码 sn -p 并调整浏览器窗口大小以查看信箱效果。

顺便说一句，你的视频源已经失效了，所以我使用了来自：http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 的示例视频。

希望对您有所帮助。

【讨论】：

这很好用，除非在像 Bootstrap 这样的响应条件下移动到单列。那时高度变为 1px，所以我建议至少在 #player-overlay 样式中设置一些最小高度。例如;最小高度：200px;

【参考方案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 来更改比率。

【参考方案4】：

您应该将此 CSS 用于正确的解决方案 - 如果你使用height: auto; 它会覆盖你的容器。

video 
  width: 100%;
  height: auto;