一、视频文件格式
     HTML5 支持三种视频文件格式（即编解码器）。
?1、Ogg Theora 使用的文件扩展名为 .ogg或 .ogv，支持它的浏览器包括 Firefox3.5+、 Chrome 4+、 Opera 10.5+ 以 及Android 版 Firefox。
?2、MP4（H.264）使用的文件扩展名为.mp4 或 .m4v，支持它的浏览器包括Safari 3.2+、 Chrome 4-?（参见提示）、Internet Explorer 9+、iOS（MobileSafari） 和 Android 2.1+、 Android 版Chrome、 Android 版 Firefox 和 OperaMobile 11+。
?3、WebM 使用的文件扩展名为 .webm，支持它的浏览器包括 Firefox 4+、Chrome 6+、 Opera 10.6+、 Android2.3+、 Android 版 Chrome、 Android 版Firefox 和 Opera Mobile 14。

PS:HTML5还指定了一种新的文件格式WebVTT（Web Video Text Track， Web 视频文本轨道）用于包含文本字幕、标题、描述、篇章等视频内容。WebVTT 规范还在制订之中，因此通过它设置标题等内容的方法未来有可能会变化。

二、设置 MIME 类型
      在有的浏览器中，如果没有设置正确的 MIME 类型，媒体文件就不会播放。
这是可以在 .htaccess 文件中添加的MIME类型（可以使用文本编辑器编辑该文件）。
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/ogg .ogg
AddType audio/mp3 .mp3

三、在网页中添加单个视频
 <video src="my-video.ext"    controls autoplay muted loop poster width（默认为300px） height（默认为150px） preload></video>
poster（海报）===指定视频加载时要显示的图像（而不显示视频的第一帧）。接受所需图像文件的 URL。
preload（视频预加载）===== 告诉浏览器要加载的视频内容的多少。可以是以下三个值：none 表示不加载任何视频;metadata 表示仅加载视频的元数据（如长度、尺寸等;auto 表示让浏览器决定怎样做（这是默认的设置）

阻止视频预加载
如果认为用户观看视频的可能性较低（如该视频并不是页面的主要内容） ，那么可以告诉浏览器不要预先加载该视频。这样能节省带宽，尤其对于移动设备用户来说好处多多。
1）对于设置了 preload="none" 的视频，在初始化视频之前，浏览器显示视频的方式并不一样。
2）preload 的默认值是 auto。这会让浏览器具有用户将要播放该视频的预期，从而做好准备，让视频可以很快进入播放状态。浏览器会预先加载大部分视频甚至整个视频。
3）preload="metadata"。这样做会让浏览器仅获取视频的基本信息，如尺寸、时长甚至一些关键的帧。在开始播放之前，浏览器不会显示白色的矩形，而且视频的尺寸也会与实际尺寸一致。
   使用 metadata 会告诉浏览器，用户的连接速度并不快，因此需要在不妨碍播放的情况下尽可能地保留带宽资源。

三、使用多种来源的视频和备用文本
     要获得所有兼容 HTML5 的浏览器的支持，至少需要提供两种格式的视频： MP4 和 WebM。通常，source元素用于定义一个以上的媒体元素，一个video元素中可以包含任意数量的 source 元素。

　　浏览器会加载第一个它支持的 source 元素引用的文件格式，并忽略其他的来源。无法播放HTML5视频的浏览器则会显示你提供的消息中的备用链接或还可以放置视频的截图或其他内容。
例子：

　　<video width="369" height="208" controls>
          <source src="http://www.mamicode.com/paddle-steamer.mp4"   type="video/mp4">
          <source src="http://www.mamicode.com/paddle-steamer.webm"  type="video/webm">
          <source src="http://www.mamicode.com/paddle-steamer.webm"  type="video/ogg">
              <p><a href="http://www.mamicode.com/paddle-steamer.mp4">Download the video</a></p>
      </video>
source的属性有:

src（视频来源的URL）

type（用于指定视频的类型，帮助浏览器决定它是否能播放该视频）

media（用于为视频来源指定 CSS3 媒体查询，从而可以为具有不同屏幕尺寸的设备指定不同的（如更小的）视频）

　　同一媒体指定多个来源的工作原理：当浏览器发现 video 元素时，首先会查看该元素本身是否定义了 src。如果没有，就会检查 source 元素。浏览器会逐个查看这些来源，直到找到它可以播放的一个来源。一旦找到这样一个，就会播放它并忽略其他的来源。

【参考资源】：
1、可以在 www.bigbuckbunny.org/index.php/download/ 找到一些免费的视频，用于试验 video 和 source 元素。该网站没有 WebM格式的视频，不过你可以通过 17.2 节提供的工具进行格式转换。
2、Ian Devlin 的 HTML5 Multimedia:Develop and Design（Peachpit Press， 2011）一书中有专门演示如何创建个人的可访问控件集和使用 WebVTT 的章节。 http://net.tutsplus.com/tutorials/html-csstechniques/an-in-depthoverview-of-html5-multimedia-and-accessibility/摘录了本书部分章节。
3、Terrill Thompson 比较了不同浏览器对HTML5 视频可访问性的支持情况，见 http://terrillthompson.com/blog/366
4、关于 WebVTT 和字幕的进一步讨论已经超出了本章的范围，不过更多信息可以参见 www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles
5、转换文件格式工具：?A、MiroVideoConverter（www.mirovideo-converter.com）       ?B、HandBrake（http://handbrake.fr）

HTML5视频Video元素