微信移动端页面开发之视频

说起视频相信大家都不陌生，作为前端开发者，我们并不需要关注视频本身；只要做到把视频正常地在页面播放出来，用户体验良好，就完成任务了。听起来好像很简单，但是由于浏览器（特别是移动端）的快速发展，前端视频的处理已经受到了广泛关注。

H5 Video 标签简单介绍

在微信中，视频的处理都是用 Html5 的 video 标签，所以在讲微信中的视频之前，先来简单回顾一下 Html5 的 video 标签。

一个最简单的 video 标签，跟图片一样，一个 src 属性中填入视频地址即可。

<video src="video.mp3"></video>

video 支持三种视频格式： Ogg、MPEG4、WebM。每种视频格式都有很多编码方式，video 主要支持的是以下编码：

1. MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
2. WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
3. Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

Html5 发布后，video 多了几个可配置的属性：

1. autoplay：视频就绪后马上播放
2. controls：视频控制的控件是否出现（进度条等）
3. height：视频播放器的高度
4. width：视频播放器的宽度
5. loop： 循环播放
6. muted：静音
7. poster：视频封面图
8. preload： 视频在页面加载时进行加载

在html5 中，一个 video 标签包含的东西就是这些。看到这里，可能有小伙伴就会问了，我在微信中看到的 video 标签，好像不止这些东西呀。

没错，这也是前端处理视频最头疼的地方：各大浏览器的兼容性。

微信中的 Video

那么在微信中的 video 是怎么样的呢：