jQuery 完全响应的 HTML5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19796799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fully responsive HTML5 video
提问by Chuck Le Butt
Is it possible to have a HTML5 in an absolutely positioned <video>element that resizes to the window width and height so that nothing is ever cropped? Lots of the solutions I've seen seem to rely on the <iframe>tag, which I don't have, or only resize based on width (which I can already do).
是否可以在绝对定位的<video>元素中使用 HTML5，该元素会根据窗口宽度和高度调整大小，从而不会裁剪任何内容？我见过的许多解决方案似乎都依赖于<iframe>我没有的标签，或者仅根据宽度调整大小（我已经可以做到）。
Basically I'm looking for a way to ensure the video is as big as it can be, but also never get cropped if the window is resized -- even in IE9. (Note: I the video has to retain its ratio -- so it's OK if there's black bars.)
基本上，我正在寻找一种方法来确保视频尽可能大，但如果调整窗口大小，也永远不会被裁剪——即使在 IE9 中也是如此。（注意：我的视频必须保持它的比例——所以如果有黑条也没关系。）
This is what I have tried so far.
这是我迄今为止尝试过的。
/*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>It seems to me that I'm going to have try and write a JS solution instead.
在我看来，我将尝试编写一个 JS 解决方案。
回答by gilly3
Use widthand max-heighton the <video>element:
在元素上使用width和：max-height<video>
/*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>Also, you're missing a semicolon after background-color. When absolutely positioning an element to fill the screen, I prefer to set top, bottom, left, and rightinstead of setting heightand width.
此外，您在background-color. 当绝对定位一个元素以填充屏幕时，我更喜欢设置top, bottom, left, andright而不是设置heightand width。
回答by DynamicDispatch
(I know this is an old thread, but I hope my answer helps someone out there.)
（我知道这是一个旧线程，但我希望我的回答可以帮助那里的人。）
Actually, you had the correct solution already. The style="width:100%, height:100%"on your <video>works, except you need a semicolon there instead of a comma. (You can remove the redundant width="100%"and video="100%"attributes.)
实际上，您已经有了正确的解决方案。在style="width:100%, height:100%"你的<video>作品中，除了你需要一个分号存在而不是逗号。（您可以删除冗余width="100%"和video="100%"属性。）
The reason that width: 100%; height: 100%works (note the semicolon) is that, even though the <video>element is stretched, the video itself keeps its aspect ratio and is letterboxed/pillarboxed inside the <video>element: https://stackoverflow.com/a/4000946/5249519.
有效的原因width: 100%; height: 100%（注意分号）是，即使<video>元素被拉伸，视频本身仍保持其纵横比，并且在<video>元素内部采用信箱/邮筒：https: //stackoverflow.com/a/4000946/5249519。
The advantage of height: 100%is that the video is letterboxed exactly in the center, whereas with max-height: 100%the video is aligned to the top of the container.
的优点height: 100%是视频正好在中心，而max-height: 100%视频则与容器顶部对齐。
Also, you should set your <video>to display: block. Otherwise, it defaults to display: inlineand you'll get some white space at the bottom of the video for the font descenders: There is a 4px gap below canvas/video/audio elements in HTML5.
此外，您应该将您<video>的display: block. 否则，它默认为display: inline并且您将在视频底部为字体下降器获得一些空白：HTML5 中的 canvas/video/audio 元素下方有 4px 的间隙。
Finally, like @gilly3 said, you need a semicolon after background-color: #000. And, of course, you need to remove display: none. =)
最后，就像@gilly3 所说的，在background-color: #000. 而且，当然，您需要删除display: none. =)
Here's the full solution:
这是完整的解决方案：
/*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>Run the code snippet in "full page" mode and resize your browser window to see the letterboxing effect.
在“整页”模式下运行代码片段并调整浏览器窗口的大小以查看信箱效果。
By the way, your video sources weren't working anymore, so I used sample videos from: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5.
顺便说一下，您的视频源不再工作，所以我使用了以下示例视频：http: //techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5。
Hope that helps.
希望有帮助。
回答by Odin13
I stumbled upon this answer while trying to find something else on responsive videos. I implemented a responsive video element using similar code.
我在尝试在响应式视频上寻找其他内容时偶然发现了这个答案。我使用类似的代码实现了一个响应式视频元素。
This link may help make sense of some things Height equals width Pure CSS
这个链接可能有助于理解一些东西 高度等于宽度纯 CSS
Your code could look like this:
您的代码可能如下所示：
#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%;
}
You can change the ratio by simply changing the padding-top on the before pseudo element.
您可以通过简单地更改 before 伪元素上的 padding-top 来更改比率。
