Question

我真的把这头发拉出来，所以任何帮助都会非常感激。

我想要的HTML5 <video>： -

全宽 - 控件应始终为屏幕宽度的100％。
最大像素高度 - 视频的高度不会超过视频的像素高度。
水平调整边界 - 调整浏览器大小时（保持比例）。
垂直调整边界 - 垂直调整浏览器大小（同时保持比例）。

这是我到目前为止： -

＆＃13;

html, body, .page {
  height: 100%;   
  background-color: #ccc;
  padding: 0;
  margin: 0;
}
video { width: 100%; height: auto;  }

＆＃13;

<html>
<body>

<div class="video-content">
	<video style="max-height: 320px;" controls> <!-- width="320" height="200" -->
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
</div>

</body>
</html>

＆＃13;

因此，这满足（1）即控件是屏幕的整个宽度，以及（2）视频的高度不大于视频的分辨率高度（320像素）。 / p>

当浏览器水平调整大小时，也满足（3）。

但是，如下垂直调整大小时会出现问题： -

请注意滚动条（与视频大小调整相反）。

所以，如果我从

video { width: 100%; height: auto;  }

...到......

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

...然后满足所有条件，除了（3）这次，即控件和实际视频之间存在间隙： -

如果我可以将100%和auto合并到height标记的<video属性中，则可能会修复此问题。可以用JavaScript破解一些东西，但我的直觉是我做了一些愚蠢的事情。

提前感谢任何提示/帮助！

Answer 1

使用以下方式更改您的视频代码：

    <video style="max-height: 100%;" controls>

Answer 2

如果我理解，这就是解决方案：

＆＃13;

video {
	width:100%;
	height:auto;
	max-height:100%
}

.video-content {
	height:100vh;
}

＆＃13;

<div class="video-content">
	<video controls> <!-- width="320" height="200" -->
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
</div>

＆＃13;

Answer 3

我有一个解决方案，它完全符合我的要求，但仍然不知道这是否是最佳解决方案，但无论如何都在这里发布。解决方案只是添加@media查询： -

@media screen and (max-height: 320px) {
    video { height: 100%; }
}

媒体查询仅在320的{{1}}像素的最大高度交换，仅在浏览器达到一定大小时才会。

全宽HTML5视频，最大高度问题

3 个答案: