完全响应的HTML5视频

Fully responsive HTML5 video(完全响应的HTML5视频)

本文介绍了完全响应的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>元素上使用widthmax-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后面缺少分号。绝对定位元素填满屏幕时,我更喜欢设置topbottomleftright,而不是设置heightwidth

这篇关于完全响应的HTML5视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:完全响应的HTML5视频

基础教程推荐