3.1 音频视频
本节我们先介绍一下音频与视频的基本知识、HTML 5技术下使用音频（<audio>标签）与视频（<video>标签）的基本方法，让读者对HTML 5的音频与视频技术有一个初步的了解。
3.1.1 音频视频的格式
MP4格式在日常生活中已经随处可见，但是大家对WebM和Ogv应该还有点陌生。WebM是一个开放、免费的媒体文件格式，最早由谷歌提出，该格式容器中包括了VP8和Ogg Vorbis音轨。WebM格式效率非常高，可以在平板电脑和其他一些手持设备上流畅地使用。Ogv即带有Thedora视频编码和Vorbis音频编码的Ogg文件，该格式文件带有不确定的版权问题，可能在未来的浏览器中被慢慢淘汰。
各种格式的优缺点不一，如WebM格式，依赖于Google和YouTube的推广，并且在硬件上有良好的支持，但是由于涉及MPEG LA的专利案件，并且在iOS设备上得不到支持，虽然传统视频和音频编码技术经历多年的发展，并且相当稳定，但对于浏览器中原生支持视频和音频还非常年轻，仍然会遇到重重阻碍，不过规范和标准日益完善，如果读者及早地在视频和音频上做好技术准备，在未来会得到加倍的回报。
3.1.2 使用video/audio元素
HTML 5除了提供audio和video元素播放音频和视频资源外，同时还配套提供了一系列的方法、属性和事件，这些方法、属性和事件允许使用JavaScript操作audio和video对象。
audio和video对象均提供了一些类似的方法，如表3-1所示。
表3-1 audio和video对象方法
下面通过一个简单的视频播放示例介绍部分API的使用。
【代码3-1】
01 <! DOCTYPE HTML>
02 <html>
03 <body>
04 <video src="video.webm" width="480" height="320" controls></video>
// 视频播放元素
05 <a href="; " class="play">播放</a> // 播放按钮
06 <a href="; " class="pause">暂停</a> // 暂停按钮
07 </body>
08 <script>
09 var video = document.querySelector('video'); // 获取视频元素
10 document.querySelector('a.play'), .addEventListener('click', function(e){
// 监听播放按钮点击事件
11 e.preventDefault(); // 阻止元素默认事件
12 video.play(); // 播放视频
13 }, false);
14 document.querySelector('a.pause').addEventListener('click', function(e){
// 监听暂停按钮点击事件
15 e.preventDefault(); // 阻止元素默认事件
16 video.pause (); // 暂停视频
17 }, false);
18 </script>
19 </html>
该示例是一个最基本的使用JavaScript操作视频元素的例子，其中用到了2个关键方法play和pause。audio和video元素除了新增许多新的方法外，同时还增加了诸多属性，如表3-2所示。
表3-2 audio和video元素属性
在实际的开发中，使用JavaScript操作视频音频元素往往会遇到很多浏览器的差异，这些问题在本章对应的示例章节会给出相应的解决方案，同时读者可以使用市面目前比较成熟的第三方视频音频类库解决兼容问题，如目前比较流行的基于HTML 5的类库video.js，官网地址http://www.videojs.com/。
3.1.3 音频视频的通信
音视频的实时通信即HTML 5的WebRTC技术，是Web Real-Time Communication的缩写，该技术主要用于支持浏览器进行实时的语音对话和视频通信。
在2011年之前，浏览器实现语音对话和视频通信技术需要通过安装插件或者客户端等一些技术实现，不论对于用户还是开发人员都是一个烦琐和复杂的过程，并且还受到各种专利的影响。谷歌公司在2010年收购了Global IP Solutions公司从而获得了WebRTC技术，在2011年，按照BSD协议把该技术开源，同年W3C将WebRTC技术纳入HTML 5成为标准的一部分。最新Android系统上的Chrome版本也加入了WebRTC技术。
WebRTC技术可以让Web开发者轻松地基于浏览器开发出丰富的实时媒体应用，帮助网页应用开发语音通话、视频聊天、P2P文件分享等功能，而不需要安装任何插件，同时开发者也不需要关心多媒体的数字信号处理过程，只需要使用JavaScript即可实现。图3.1为WebRTC的技术架构图。
图3.1 WebRTC的技术架构图
WebRTC技术由以下3部分组成。
● MediaStream：本地的音频视频流或来自远端浏览器的音频视频流。
● PeerConnection：执行音频视频调用，支持加密和带宽控制。
● DataChannel：采用点对点传输，传输常规数据。
下面通过一个示例演示如何使用浏览器WebRTC，代码如下：
【代码3-2】
01 <! DOCTYPE html>
02 <html>
03 <body>
04 <video autoplay></video> <! -- 视频播放元素 -->
05 <script>
06 try { // 使用WebKit核心下的getUserMedia方法
07 navigator.webkitGetUserMedia({audio: true, video: true},
uccessCallback, errorCallback);
08 } catch (e) {
09 navigator.webkitGetUserMedia("video, audio", successCallback,
errorCallback);
10 }
11 function successCallback(stream) { // 成功回调并设置video元素
12 document.querySelector('video').src = window.webkitURL.
createObjectURL(stream);
13 }
14 function errorCallback(error) { // 失败回调返回错误信息
15 console.log(’发生错误，编号：' + error.code);
16 }
17 </script>
18 </body>
19 </html>
将上述代码保存至后缀为html的文件，并放置于Web服务器，如IIS、Apache、Nginx等。使用最新Chrome浏览器打开页面地址，浏览器会提示是否启用摄像头和麦克风，如图3.2所示。
图3.2 浏览器提示是否启用摄像头和麦克风
点击浏览器提示条中的“允许”按钮，此时浏览器内出现一个宽640像素、高480像素的视频窗口，显示内容为用户摄像头拍摄视频。
随着WebRTC的发展和各大技术巨头的支持，虽然标准尚未完全成熟，但足以给开发者代码前所未有的惊喜，Web开发人员可以完全基于浏览器开发音频视频实时在线应用。目前，已经出现了一批颇具实力的类库，如webRTC.io和WebRTC-Experiment等，用户可以前往项目地址学习使用，地址分别为https://github.com/webRTC/webRTC.io和https://github.com/muazkhan/WebRTC-Experiment。
提示
BSD是Berkeley Software Distribution的缩写，中文意思为伯克利软件发行版，是一整套软件发行版的统称，是自由软件中使用最广泛的许可证之一。BSD的最初所有者是加州大学董事会。该协议可以自由地使用并修改源代码，也可以将修改后的代码作为开源或者专利软件再发布。