本节书摘来自异步社区《HTML5多媒体应用开发》一书中的第2章，第2.2节,作者： 【爱】Ian Devlin 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2　原生多媒体

使用原生多媒体，对象不再嵌入到Web文档中，而是被浏览器当作原生对象构建。这提供了以下直接的好处。

不再需要插件。
速度——任何浏览器原生功能都比第三方附加软件快。
浏览器提供的原生控件。
自动内建键盘可访问性。
HTML5提供4个新的标示元素，帮助你实现浏览器原生多媒体。下面我们来看看这些元素以及可能出现的属性。

2.2.1　audio元素
audio元素允许你在Web文档中嵌入音频文件或者音频流。下面这行简短的代码可以向你展示使用audio元素在你的Web文档中嵌入音频文件有多容易：

<audio src="sayHello.mp3"></audio>

比以前简单多了，不是吗？

这行代码示例通知浏览器嵌入指定的音频文件，并使用浏览器自己的多媒体控件。各种浏览器都有不同的默认控件，所以音频控件的外观依赖于查看者使用的浏览器。如图2.2～图2.6所示，你可以看到这些控件的不同显示效果。

从表2.1中你可以看到，audio元素可以使用许多不同的设置，其中一些属性有许多设置。Web文档中的音频声明可能像下面这样：

<audio src="sayHello.ogg" controls></audio>

你将在第3章中学习到更多有关audio元素的内容，将会提供更多深入的使用示例以及表2.1中列出的大部分属性的组合。

现在你已经简单地了解了audio元素的属性，我们接着看看video元素。

2.2.2　Video元素
Video元素允许你在Web文档中嵌入视频内容，你同样可以指定许多控制这一内容的属性。许多属性与audio元素中的相同，但是还有一些额外的属性，如表2.2所示。

https://yqfile.alicdn.com/d3e3d79da85b6802bc50babdd24cc28dbbfc0128.png" >

crossorigin

crossorigin是最近加入到HTML5规范的，因此目前没有实际的应用，没有一个主流浏览器支持它。它使用CORS（跨域资源共享）规范，你可以在www.w3.org/TR/cors看到这个规范。

Mediagroup

和crossorigin类似，mediagroup也是最近加入到HTML5规范的，在本书编写时还没有在任何主流浏览器中实现。一旦得以实现，它对于可访问性是很有益的，因为它使在常规视频旁边播放同步的手语视频之类的方案成为可能。
你可以看到，audio和video元素的许多属性相同，在使用时当然非常方便，因为你只需要记住一组属性。

下面是一个使用video元素在Web文档中显示一个带有浏览器控件的视频的例子：

<video src="snowy-tree.mp4"width="300"height="176"controls>
 p </video>

这个简单的例子告知浏览器，显示一个包含snowy-tree.mp4视频文件，大小为300像素 × 176像素，带有默认媒体控件的视频播放器。

和音频一样，各种浏览器显示的控件和视频是不同的。如图2.7～图2.11所示，你可以看到各种浏览器中的视频控件外观。

https://yqfile.alicdn.com/5e08c8d707842f19d1ce23c9018c844c16f3444b.png" >

2.2.3　Source元素
由于不同的浏览器需求（在第3章和第4章中有更多相关的内容），通常要求为相同的audio和video元素指定不同的源。

正如前面所见，audio和video元素提供一个src属性，用于放置指向音频或者视频源的URL。但是该属性只允许一个源。那么怎么添加多个源呢？

这正是source元素发挥作用的地方。audio和video元素声明中可以包含任何数量的source元素，通过这个元素你可以指定多个媒体源。

source元素可以包含如表2.3所示的属性。

source元素允许你为特定的多媒体作品指定不同的源，下面是一个例子：

<audio controls>
　　<source src="sayHello.ogg" type="audio/ogg">
　　<source src="sayHello.mp3" type="audio/mp3">
　　Sorry,your browser doesn’t support the audio element
</audio>

在这个例子中，两个不同的音频文件格式可供浏览器播放。浏览器将播放它所了解的第一种格式，忽略不了解的任何格式。如果浏览器无法找到能够播放的格式，它将用文本“Sorry, your browser doesn’t support the audio element（抱歉，你的浏览器不支持这个音频元素）”来通知用户该浏览器无法播放这段音频。

浏览器忽略不理解的内容的这个过程在提供跨浏览器支持的多媒体解决方案时被证明非常有用。前面已经提到，不同的浏览器支持不同的多媒体文件格式，你在下两章中可以更详细地读到。

2.2.4　Track元素
Track元素用于为媒体元素指定明确的外部定时文本轨道。该元素必需与一个audio或者video元素一起使用，因为它本身没有任何意义。

这个元素主要用于为多媒体资源提供更多可访问性，因为它可以提供标题、描述、文本和字幕。这些内容都可以在浏览器中与播放的媒体一起显示。

在大部分情况下，通过track元素提供的信息更适合于视频媒体源。

和前面描述的其他元素类似，track元素可以使用许多属性，如表2.4所示。

Track元素可以用于指定媒体资源的全部文字记录，例如，可以用于让听力有损伤的人们使用这些媒体。它还使你可以指定不同语言的多种字幕和描述，下面是一个例子：

<video src="sayHello.mp4">
　　 <track kind="subtitles"src="hello-en.vtt"srclang="en"
　　  p label="English">
　　 <track kind="subtitles"src="hello-de.vtt"srclang="de"
　　  p label="German">
</video>

这个例子为sayHello.mp4视频指定两个不同的文件，分别用于英语和德语。

https://yqfile.alicdn.com/91a92316b93cdd2f3d54b55b1459054d6168731b.png" >

Safari和Internet Explorer 9的怪癖

*我在本章前面部分提到，原生多媒体是***的，最理想的是不需要第三方插件，我可能有些歪曲事实。并不是说原生多媒体不好，它确实是绝妙的。
但是，为了在Safari和Internet Explorer 9中使用原生多媒体，Apple要求用户必须安装其QuickTime插件，而Microsoft要求在系统上安装其Media Player。

这些要求在某种程度上损害了原生多媒体的概念。我不知道为什么苹果公司和Microsoft做出这样的选择，但这是它们的立场。*