本文介绍了完全响应的HTML5视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在绝对定位的<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视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！