极客教程HTML5 – 音频和视频
HTML5具有本地音频和视频支持，无需使用Flash。
HTML5的<audio>和<video>标签使网站添加媒体变得简单。您需要设置 src 属性以标识媒体源，并包括controls属性，以便用户可以播放和暂停媒体。
嵌入视频
这是在网页中嵌入视频文件的最简单形式 –
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
当前的HTML5草案规定了浏览器应在视频标签中支持哪些视频格式。但最常用的视频格式是 –
- Ogg - Ogg文件与Theodora视频编解码器和Vorbis音频编解码器一起使用。
-
mpeg4 - 使用H.264视频编解码器和AAC音频编解码器的MPEG4文件。
您可以使用<source>标签来指定媒体，同时指定媒体类型和许多其他属性。视频元素允许多个源元素，并且浏览器将使用第一个被识别的格式 –
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
这将产生以下结果 –
视频属性规范
HTML5视频标记可以具有许多属性，以控制控件的外观和各种功能 –
| Sr.No. | 属性和描述 |
|---|---|
| 1 | autoplay - 如果指定了这个布尔属性，视频将在准备好加载数据而无需停止时自动开始播放。 |
| 2 | autobuffer - 如果指定了这个布尔属性，视频将自动开始缓冲，即使未设置为自动播放。 |
| 3 | controls - 如果存在此属性，它将允许用户控制视频播放，包括音量，查找和暂停/恢复播放。 |
| 4 | height - 此属性指定视频显示区域的高度，以CSS像素为单位。 |
| 5 | loop - 如果指定了此布尔属性，则在到达结尾后，视频将自动寻回到开头。 |
| 6 | preload - 此属性指定视频将在页面加载时加载并准备运行。如果存在autoplay，则忽略。 |
| 7 | poster - 这是一个URL，用于用户播放或搜索之前显示的图像。 |
| 8 | src - 要嵌入的视频的URL。这是可选的; 您可以改用视频块内的 |
| 9 | width - 此属性指定视频显示区域的宽度，以CSS像素为单位。 |
嵌入音频
HTML5支持<audio>标记，用于像下面这样在HTML或XHTML文档中嵌入音频内容。
<audio src = "foo.wav" controls autoplay>
您的浏览器不支持<audio>元素。
</audio>
当前的HTML5草案规范没有规定浏览器应该支持哪些音频格式在音频标签中。但是，最常用的音频格式是 ogg，mp3 和 wav 。
您可以使用 <source> 标签来指定多媒体，以及多种其他属性。音频元素允许使用多个源元素，在识别第一个格式时，浏览器将使用它。
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
您的浏览器不支持<audio>元素。
</audio>
</body>
</html>
这将产生以下结果 −
音频属性规范
HTML5音频标签可以具有多个属性，以控制控件的外观、感觉和各种功能 −
| 序号. | 属性&描述 |
|---|---|
| 1 | autoplay 如果指定了这个布尔属性，音频将在无需停止完成数据加载的情况下自动开始播放。 |
| 2 | autobuffer 如果指定了这个布尔属性，音频将自动开始缓冲，即使它没有设置为自动播放。 |
| 3 | controls 如果存在此属性，它将允许用户控制音频播放，包括音量、搜索和暂停/恢复播放。 |
| 4 | loop 如果指定了这个布尔属性，音频将在到达结尾后自动寻找回到起点。 |
| 5 | preload 此属性指定将在页面加载时加载音频，并准备运行。如果存在 autoplay，则被忽略。 |
| 6 | src 要嵌入的音频的URL。这是可选的；您也可以在视频块内使用 |
处理媒体事件
HTML5的音频和视频标签可以使用JavaScript控制控件的各种功能，以下是一些属性 −
| 序号 | 事件和说明 |
|---|---|
| 1 | abort 当播放被中止时产生此事件。 |
| 2 | canplay 当足够的数据可供播放时生成此事件。 |
| 3 | ended 当播放完成时产生此事件。 |
| 4 | error 当发生错误时产生此事件。 |
| 5 | loadeddata 当媒体的第一帧完成加载时生成此事件。 |
| 6 | loadstart 在媒体加载开始时产生此事件。 |
| 7 | pause 当播放被暂停时产生此事件。 |
| 8 | play 当播放开始或恢复时产生此事件。 |
| 9 | progress 定期生成此事件，以通知媒体下载的进度。 |
| 10 | ratechange 当播放速度改变时产生此事件。 |
| 11 | seeked 当搜索操作完成时产生此事件。 |
| 12 | seeking 当搜索操作开始时产生此事件。 |
| 13 | suspend 当媒体加载被暂停时产生此事件。 |
| 14 | volumechange 当音频音量改变时产生此事件。 |
| 15 | waiting 当请求的操作（例如播放）因等待另一个操作（例如搜索）完成而被延迟时，生成此事件。 |
以下是一个允许播放给定视频的示例−
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>
这将产生以下结果−
配置媒体类型的服务器
大多数服务器默认情况下不使用正确的MIME类型服务于Ogg或mp4媒体，因此您可能需要添加适当的配置。
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4