HTML5 支持直接在浏览器中播放音频和视频文件，不需要使用Abode Flash这样的插件。
1. 使用 video 元素
可以用video 元素在网页里嵌入视频内容。
其基本用法如下：
使用video元素 Video cannot be displayed
此例显示效果如下：
如果浏览器不支持video元素或者无法播放视频那么备用内容（开始和结束标签之内的内容）就会代替它显示。此例中，显示了一段简单的文本消息，但常用的技巧是提供使用费HTML5技术（例如Flash）的视频播放，以支持旧版的浏览器。
video 元素有许多属性，下表列出了它们：
1.1 预先加载视频
preload属性告诉浏览器：当它加载完包含video元素的网页后，是否应该积极地去下载视频。预先加载视频减少了用户播放时的初始延迟，但如果用户不观看视频则会造成网络带宽的浪费。下表介绍了这个属性允许设置的值。
在决定是否预先加载视频时，应当权衡用户想要观看视频的可能性与自动载入视频内容所需要的带宽。自动载入视频会带来更平滑的用户体验，但它可能会大大提升经营成本，如果用户没有观看视频就离开网页，那么这些成本就浪费了。
这个属性的metadata值可以被用来在none和auto值之间建立起适度的平衡。none值的问题在于视频内容会在屏幕上显示为一片空白区域。metadata值会让浏览器获取足够的信息来向用户展示视频的第一帧，而不必下载全部内容。
将none和metadata值用于preload属性 Video cannot be displayed Video cannot be displayed
此例展示了在同一个文档里使用none和metadata值，其显示效果如下，可以看到这些值如何影响展示给用户的预览画面。
PS:metadata值向用户提供了漂亮的预览画面，但需要慎重一些。当用网络分析工具测试这个属性，发现尽管只请求了元数据，但是有些浏览器实际上会预先下载整个视频。平心而论，浏览器可以自由选择是否忽略preload属性所表达的偏好。但是，如果需要限制带宽的消耗，poster属性可能更胜一些。
1.2 显示占位图像
可以用poster属性向用户呈现一张占位图像。这张图像会显示在视频的位置，直至用户开始播放。
使用poster属性来指定占位图像> Video cannot be displayed
这里为视频文件的第一帧做了一张屏幕截图，然后在它上面叠加了单词 Poster（海报）。这张图像包括了视频控件，以此提示用户这张海报代表一段视频剪辑。这里还在此例中加入了一个img元素，以演示video元素会不加改动地展示这张海报图像。
1.3 设置视频尺寸
如果省略width和height属性，浏览器就会显示一个很小的占位元素，并在元数据可用时（也就是当用户开始播放，或者preload属性被设为metadata时）把它调整到视频原始尺寸的大小。这可能会产生颤动感，因为页面布局需要调整以容纳视频。
如果指定width和height属性，浏览器会保持视频的长宽比（不必担心视频会向任一方向拉伸）。
应用width和height属性 video Video cannot be displayed
此例中设置的width属性与height属性的比例是失衡的。这里还给video元素应用了一个样式，以凸显浏览器为了保持视频的长宽高，只会使用部分指派给该元素的空间。
1.4 指定视频来源（和格式）
指定视频最简单的方式是使用 src 属性，并提供所需视频文件的URL。
可以看到前面的例子中，用src属性指定了文件 timessquare.webm。这是一个用WebM 格式编码的文件。目前还没有哪一种视频格式被普遍支持，如果想将视频推向各种各样的HTML5用户，就要做好以多种格式编码视频的准备。
一个不幸的事实是，没有哪一种格式能够用于所有的主流浏览器。因此，必须以多种格式编码视频，直到出现同一一种格式为止。可以使用source元素来指定多个格式。
下面例子展示了如何使用 source元素来向浏览器提供备选视频格式。
用source元素 Video cannot be displayed
浏览器会沿着列表顺序寻找它能够播放的视频文件。这可能会引发多个服务器请求以获得每个文件的额外信息。浏览器判断它是否能播放某个视频的依据之一是服务器返回的MIME类型。可以通过给source元素应用type属性来提示用户，方法是在其中指定文件的MIME类型。
在source元素上应用type属性 /> Video cannot be displayed
PS:media属性向浏览器指明该视频最适合在那种设备上播放。
2. 使用 audio 元素
audio 元素允许在HTML文档里嵌入音频内容。
可以看到audio和video元素有许多共同点。下面的例子展示了audio元素的用法。
使用audio元素 Audio content cannot be played
也可以使用source元素来提供多种格式。
使用audio元素 Audio content cannot be played
这两个例子都使用了controls属性，这样浏览器就会对用户显示默认的播放控件。它们在不同的浏览器中外观各异，下面是在火狐浏览器中的显示效果：
3. 通过 DOM 操作嵌入式媒体
相关文章
精彩导读
热门资讯
关注我们
