09-普通的视频嵌入方法
6.3.1 普通的视频嵌入方法
本节将基于前面介绍的视频格式规范演示嵌入视频的基本方法。因为没有一种格式可以兼容所有浏览器，所以本书将使用3种格式。将Muir海滩的视频分别转换为.webm格式、.ogg格式和.mp4格式。在本章其余部分进行视频嵌入时，也将使用这3种格式。
为了一次性支持3种格式，可以在设置
<video id="thevideo" width="320" height="240">
<sourcesrc="muirbeach.webm"type='video/webm; codecs="vp8, vorbis" '>
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>提示
之所以将.mp4文件放在src列表中的第二位，是因为新版本的Chrome将尝试使用这种格式，但性能一般。同时，在使用旧版Safari的iOS设备（iPhone和iPad）上也可能会出现问题，浏览器只会加载src列表中的第一种类型，而不会去尝试其他类型。
当一个浏览器读取这段HTML代码时，它将依次尝试加载每一个视频。如果不支持，就尝试加载下一个视频。使用这种嵌入视频的方式，可以在所有兼容HTML5的浏览器中运行例6-1中的代码。
请注意，还需要设置视频的width和height的属性。正如之前介绍的，这些属性并不是必须的，正规的HTML格式中应该包含它们。当在代码中操作视频尺寸的时候则需要用到这些属性。
例6-1 基础的HTML视频
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX1: Basic HTML5 Video</title>
</head>
<body>
<div>
<video id="thevideo" width="320" height="240">
<source src="muirbeach.webm" type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div>
(Right-click To Control)
</div>
</body>
</html>图6-1所示为在HTML5页面中用普通方法嵌入视频的示例。在默认的设置中不会显示控制界面。但是，如果用鼠标右键单击视频则会出现控制界面，通过该界面可以与嵌入的视频进行交互。
