html5 添加视频元素
在 HTML5 中，使用 <video> 元素向网页添加视频播放器是一种简单而强大的方式。采用最基本的形式，只需一行 HTML 代码即可完成。通过添加特定的特性，用户可以对视频播放进行控制，同时还能设置源文件、添加占位符图像或实现自动播放等功能。与大多数 HTML 元素一样，还可以使用层叠样式表（CSS）来设置元素的样式和位置。
以下是一个基本的示例：
<video src="demo.mp4" controls autoplay>HTML5 Video is required for this example</video>
特性详解
src 特性
src 特性指向要播放的视频文件，它是为视频元素指定内容的两种方法之一。若要播放视频，需将 src 特性分配给视频文件的 URL。
controls 特性
controls 特性通知浏览器显示内置的播放控件。各个浏览器之间的内置控件在功能和外观方面可能有所不同，但至少应包含“播放”和“暂停”控件、进度条、快进或快退视频的按钮以及计时器。通常，视频播放时这些控件会隐藏，当用户将鼠标悬停在播放器上时会重新显示。
autoplay 特性
autoplay 是一个布尔型特性，该特性会使视频在加载完成后自动开始播放。
其他常用特性
| 特性 | 说明 |
|---|---|
src | 表示指向视频文件的 URL 的字符串。 |
controls | 打开一组内置播放控件的布尔型特性，通常包括播放、暂停、定位以及设置音量。Internet Explorer 10 还显示用于选择多个音频和文本曲目的控件。 |
poster | 表示视频播放器中显示的占位符图像的字符串。仅当视频不可用时才显示海报图像，即未设置源或者内容仍在加载时。 |
loop | 重复重播视频直到按下控件上的暂停按钮或者从脚本调用 pause 方法的布尔型特性。 |
muted | 在关闭音频曲目的情况下播放视频的布尔型特性。 |
autoplay | 在播放器缓冲了足够多的内容之后自动开始播放视频的布尔型特性。 |
preload | 定义需要多少缓冲的提示的布尔型特性。 |
height | 设置视频播放器的高度（以像素为单位）。 |
width | 设置视频播放器的宽度（以像素为单位）。 |
尺寸设置注意事项
如果仅设置了视频播放器的一个尺寸，例如高度，则视频播放器将视频大小调整到该尺寸并根据视频内容的纵横比缩放其他尺寸。如果将两个尺寸设置为与视频内容不匹配的纵横比，则播放器缩放最接近的尺寸以适应其尺寸，但会保持其纵横比，视频将水平或垂直居中，两侧留有空白区域。
复杂示例
以下示例展示了如何播放视频、在加载内容之前显示海报、使用播放控件重复播放视频：
<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg">
HTML5 Video is required for this example
</video>
支持多种格式
视频元素仅允许一次设置一个 src 特性。如果知道要使用一种文件格式，则可正常工作。但如果希望支持多种文件格式和多种浏览器，则可以使用 source 元素。
source 元素与视频元素结合使用，可提供“最适合的”视频内容格式。这意味着，可以指定多种格式，HTML5 视频播放器会选取最适合的一种格式。对于 Windows Internet Explorer，通常是 .mp4 文件，而对于其他浏览器，通常是 .ogg/.ogv 格式。
以下示例显示了具有三种可能文件格式的视频元素：
<video controls poster="demo.jpg">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm" />
<source src="demo.ogv" type="video/ogg" />
<p>Fallback code if video isn't supported</p>
</video>
在此示例中，列出了三种格式：mp4、webm 和 ogg 视频。根据浏览器的不同，视频元素会选择它可以播放的一种格式。如果该示例不能播放任何一种格式，或者不支持 HTML5 视频，则会显示 <video> 标记之间包含的文本。这种“回滚”行为可以用于显示消息，或者可以包含嵌入的播放器。
多浏览器支持解决方案
如果需要多浏览器支持，可以借助插件实现。例如，VideoJS 是一个基于 JavaScript 的 HTML5 视频播放器，当浏览器不支持时会自动切换成 Flowplayer 播放器。FlowPlayer 是一个用 Flash 开发的在 Web 上播放 FLV 格式视频的播放器，可以很容易地将它集成在任何的网页上使用。