《HTML5多媒体应用开发》——2.2 原生多媒体-阿里云开发者社区

开发者社区> 异步社区> 正文

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

简介:
+关注继续查看

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

2.2 原生多媒体

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

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

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

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

比以前简单多了,不是吗?


2504fbd536d3d85fc4c3b045c733186a8c99f009


07a224b3f7eeba75af550bcbedf389606ef46faf

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


d008081b6b1652e8d143130e1eb6774058b5ac02

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


d8f1a1e97e253e661eb4b2871c30553d46d922c8


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


26b754da03c79cc173a6512a5cc6b7dca7b1994a


<a href=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(抱歉,你的浏览器不支持这个音频元素)”来通知用户该浏览器无法播放这段音频。

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


b22daf1b595836403ddafd2f4a07ec42f68f5eb2

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


<a href=https://yqfile.alicdn.com/91a92316b93cdd2f3d54b55b1459054d6168731b.png" >

Safari和Internet Explorer 9的怪癖

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML5和JavaScript Web应用开发》——导读
本书的目标是带你经历研究和开发的所有步骤,在当今这个新颖而大胆的世界中,构建移动优先、灵敏、先进的Web应用以及基于任何JavaScript架构的应用程序。每一章都包含了实际的例子,并使用了所讨论的每个规范。
1141 0
HTML_多媒体
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
739 0
一起谈.NET技术,HTML5 - 搭建移动Web应用
  关于HTML5   HTML5具有语义学、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成和CSS3八大技术特征。让Web应用进入无插件时代,在功能和性能上逼近桌面应用。促使应用Web化,实现跨平台。
884 0
HTML5 地理位置定位(HTML5 Geolocation)原理及应用
  地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。
854 0
用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。
1516 0
《HTML5和JavaScript Web应用开发》——2.6 QA和设备测试
因为当前移动市场主要属于Android和iOS,进行基于WebKit的测试相当简单,我们可以像平常在桌面浏览器那样进行测试,然后在某个版本的WebKit支持的目标移动设备上运行。但是,在桌面版本的Chrome或者Safari上测试应用,并不意味着在所有基于WebKit的移动浏览器上都能正常工作,也不意味着WebKit能够完全代表移动Web。
1081 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
11939
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载