html5的video标签如何拉伸视频，使其变形并且适配div宽高比例？

父集div使用relative定位，padding-bottom值充当空间，子集video元素absolute定位

具体例子如下，比如视频是16:9的比例，这样比例就不会变了，并且适配div的等高比例

css

.vid-wrapper{

    width:100%

    position:relative

    padding-bottom:56.25%    /*需要用padding来维持16:9比例,也就是9除以16*/

    height: 0

}

.vid-wrapper video{

    position: absolute

    top:0

    left: 0

    width: 100%

    height: 100%

}

html

<div class="vid-wrappper">

    <video src=""></video>

</div

当前，“视频”元素支持三种视频格式： 　IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg √√ √ √ 　MPEG 4 √√ √ WebM √√ √ √ 　Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

实例 <videosrc=movie.oggwidth=320height=240controls=controls>浏览器不支持“视频”标签。</video>上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

video 元素允许多个“源”（实际应用src、外语全称SouRCe）元素。“源”元素可以链接不同的视频文件（视频文件的来“源”）。

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

---