《HTML5多媒体应用开发》——2.2 原生多媒体

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所示。

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所示,你可以看到各种浏览器中的视频控件外观。

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视频指定两个不同的文件,分别用于英语和德语。

Safari和Internet Explorer 9的怪癖

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

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

时间: 2024-09-03 03:43:38

《HTML5多媒体应用开发》——2.2 原生多媒体的相关文章

《HTML5多媒体应用开发》——导读

https://yqfile.alicdn.com/8137aea0012e7bc3400792be10a2b542398c0406.png" > 前言无论是Web开发人员还是设计人员,或者仅仅是对自己的网站进行维护的人员,都知道Web总是在变化,用于构造网站的工具和方法也一直在发展.就像撒哈拉大沙漠中的沙丘一样,它们一直都在移动.幸运的是,移动的方向通常是向前的.Web技术目前转移到了HTML5-定义和构建网页语言的最新版本.它已经成为向网页中添加多媒体的一个更简捷的方法. 本书的目标是

《HTML5多媒体应用开发》——1.2 HTML5的发展

1.2 HTML5的发展 Tim Berners-Lee是HTML之父,这是相当为人熟知的,在当今的Web开发领域中每个人都承认这一点. 没有必要了解HTML从1990年的初始版本到大部分人已经了解的HTML 4.01之间漫长而详细的历史,但是HTML5取得成果和进展的过程值得一提. 1998年,万维网联盟(W3C,www.w3.org)成员决定,不值得对HTML 4.01规范作进一步扩展.他们决定未来的Web将依靠XML(扩展标记语言),因为它的语法更加严格,这就使得XML Web文档更加容易

《Android多媒体应用开发实战详解:图像、音频、视频、2D和3D》——2.1节简析Android安装文件

2.1 简析Android安装文件 Android多媒体应用开发实战详解:图像.音频.视频.2D和3D 当下载并安装Android后,会在其安装目录中看到一些安装文件.了解这些文件具体是干什么用的,对于我们后面的驱动开发知识学习十分有用,所以在本节的内容中将简要介绍这些安装文件的基本知识. 2.1.1 Android SDK目录结构 安装Android SDK后,其安装目录的具体结构如图2-1所示. temp:里面包含了一些常用的文件模板. tools:包含了一些通用的工具文件. usb_dri

《HTML5移动应用开发入门经典》—— 2.1 HTML5中的新标签

2.1 HTML5中的新标签 HTML5移动应用开发入门经典 HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签.它们过去从未成为HTML的一部分,但现在却是HTML元素了. 2.1.1 新布局标签 大部分新标签被称为"分节"元素,它们为HTML文档的布局及分段提供语义.第9章将更详细地介绍这些标签. 新布局标签如下所示. --文档或站点的一个独立部分. --页面或站点主题之外的内容. --figure元素的标题. --独立于文本流之外的一段流内容(如图形.图表等

《HTML5移动应用开发入门经典》—— 导读

前言 HTML5移动应用开发入门经典 如今,网络时刻都在发生着飞速变化.浏览器推出新版本的频率已经从之前的每几年一次变成了每几个月一次,新的设备随时都在问世.对于Web开发者而言,跟上技术和趋势的变化十分重要,而当前的技术趋势就是HTML5. 实际上,根据一些资料显示,HTML5和移动应用已经成为就业增长最快的两个领域.根据Freelancer.com(著名的外包市场平台)和iTWire报道,在2011年第一季度,要求接包方能使用HTML5的比例上升了34%,而总的与HTML相关的工作仅仅上升了

《HTML5移动Web开发实战》—— 1.1 简介

1.1 简介 HTML5移动Web开发实战HTML5以及移动网站都是很有前景的技术,他们都有着相对较短的历史.本章介绍的大部分内容都是比较基础的,可以帮助你迅速.轻松地开始移动端开发. 移动网站以及HTML5本身仍然在不断演进,对此你肯定有很多的疑惑.我们会解开这些疑惑并告诉你应该专注在哪些真正重要的事情上. 移动网站的增长非常之快.移动端Safari浏览器是当前最常用的iPhone应用,它使开发人员可以创建高性能的网页应用并提高用户的浏览体验.移动网站的好处在于,你不需要申请开发者账号就可以运

3 款强大的 HTML5 游戏快速开发工具推荐

目前,HTML5已经在移动领域打败了Flash,越来越多的开发者已投身或准备投身到HTML5应用的开发中.由于HTML5无可替代的优势,其前景一片光明.  本文主要介绍三款工具,可帮助开发者快速进行HTML5 2D游戏的开发.  1.  GameMaker  最老牌.最强大的一款工具.最近添加了对HTML5的支持(GameMaker:HTML5).借助此工具的可视化开发界面,开发者无需写代码即可创建简单的游戏.  对于复杂游戏,GameMaker可以根据用户创建的界面生成游戏脚本代码,代码基于G

火舞游戏首届HTML5移动游戏开发大赛

2014年11月8日,由火舞游戏主办的首届HTML5移动游戏开发大赛在北京正式拉开帷幕.本次大赛基于HTML5标准,旨在推广普及未来HTML5核心技术;同时也希望能够给有实力的开发者提供一个良好的平台.本次大赛火舞游戏出资50余万元用于大赛奖项,其中包括6万元的特等奖以及其他重头奖项:同时,大赛组委会聘请了众多业内资深人士及广大玩家共同担任评委,力争做到公平.公正.届时,移动游戏相关行业的各路精英将汇聚于此,共同见证游戏行业未来之星的诞生.提及HTML5,早在2007年,W3C(万维网联盟)就立

《HTML5移动应用开发入门经典》—— 2.2 HTML5的新属性

2.2 HTML5的新属性 HTML5移动应用开发入门经典 HTML5中的许多新属性是它们相关标签的扩展.可以通过一些新的event(事件)属性将脚本与Web页面事件关联起来.另外,还可以使用适用于所有HTML5元素的全局新属性. 在HTML中,属性出现在标签名称后,由空格分开,并介于"<"和">"号之间.若该属性包含一个值,值通过等号被附加在属性上.若值中包括空格,需要用引号将整个值括起来.例如: 或: 布尔值属性同样适用于HTML5,它们不需要值.若