第一章 HTML5 中默认情形下的音频和视频元素

　　媒体元素——即HTML5中audio和video元素的统称——是一种能将可播放的媒体元素直接嵌入网页而无需依赖Flash和插件的方法。这些元素能够使用CSS来改变其样式，与SVG和Canvas相互整合以及使用Javascript来控制。

　　支持HTML5媒体元素的浏览器和其他客户端分别对其提供了默认的控制以及行为方式。在章将包括如何在你的网页中加入HTML5video和audio元素以及探讨在不同浏览器中具体实现的不同之处。本章也会介绍HTML5支持的媒体文件格式以及各自分别支持他们的浏览器和运行环境。

　　浏览器对media元素的支持非常广泛，但是并非所有特性在所有游览器中都得到了较好的支持。表格1-1提供了体格关于当前流行的浏览器和移动环境的列表，以及它们分别能支持media元素的最低版本：

在网页中添加media元素

　　HTML5的media元素享有共同的语法和属性子群。两种media元素的唯一不同之处在于它们管理的内容，以及video元素的一小族特有的属性。

最简单的语法

　　在网页中添加media元素的最简单的语法如例子1-1所示。在HTML中，一个audio元素可以将一段编码为Ogg Vorbis的音频文件嵌入网页中。音频文件的URL为audio元素的src属性。audio元素的样式和行为由HTML5标准默认定义并由浏览器负责实现。

　　例子1-1 使用audio元素在HTML5网页中嵌入音频文件

1 <!DOCTYPE html>
2 <head>
3 <title>Audio</title>
4 <metacharset="utf-8" />
5 </head>
6 <body>
7 <audiosrc="audiofile.ogg">
8 </audio>
9 </body>

　　页面验证为HTML5，并且Firefox、Chrome、Opera浏览器完全支持这种文件类型。当你用这些浏览器加载该页面是，浏览器不会报错。但是，除了一个空白页面，你不会看到任何东西。

　　比较例子1-1和以下代码：

1 <!DOCTYPE html>
2 <head>
3 <title>Video</title>
4 <metacharset="utf-8" />
5 </head>
6 <body>
7 <videosrc="videofile.ogv">
8 </video>
9 </body>

　　不像audio元素，只要没有发生载入错误，video元素会显示有播放区域，并且不会故意隐藏起来。如果你想要在页面上看到实际的audio元素，你需要添加controls属性。由于controls是一个布尔值属性，你所需要做的是添加属性关键字：

1 <audiosrc="meadow.ogg"controls>
2 </audio>

　　一个布尔值属性指的是不需要赋值的属性：该属性出现时意味着true，缺省时则意味着默认的false。然而，布尔值属性必须要赋值如果你的页面规格不是XHTML，否则你将收到一个页面错误的提示。在XHTML5中的标准方法是将布尔值属性赋值为布尔值属性的名称，要注意将赋值卸载引号内而且不要有多余的空白(controls="controls")。

　　图1-1显示了添加了controls属性后的audio元素在Firefox浏览器中的显示效果。控制条虽然很简陋，但是能良好的运作。你现在可以得知音频文件被添加到了页面当中，并且能够开始和停止音频文件，控制音量大小以及查看播放的进度。

　　　图1-1 audio元素在Firefox浏览器中的显示效果

无效Script语句以及魔法般的控制UI

　　无论是video元素还是audio元素都支持为媒体资源添加一个默认控制UI（即用户界面）的控制属性。如果你不想要默认的控制UI，移除controls属性即可。然而要注意的是当语句无效时一些有趣的事情便会发生：在不止一个浏览器中，控制UI都自动被加入到了媒体元素当中，无论你想不想要它。

　　那些想要提供自定义控制界面的网页开发者往往会把controls属性移除以便它不和自定义的控制界面发生冲突。开发者常常会一开始把controls属性添加到audio和media元素中，然后当媒体元素载入时又迅速地移除它。这样便可以确保一旦script语句失效，用户依然可以播放媒体资源。

　　然而，有事人们会自动忽略controls属性因为他们只是想把媒体元素作为网页表现形式的一部分并且在页面加载时便播放媒体文件——无论script语句有效还是无效。他们会移除controls属性，并且增加autoplay和loop属性（在后面的章节中会提到）。如果script语句有效，默认的媒体控制界面便不会添加到页面中——但是如果script语句在用户的浏览器中无效，根据HTML5的规则，浏览器会自动加入控制界面。

　在网页发展过程中，这是一件前无古人的非寻常事件。似乎只有当script无效时，浏览器不管开发者愿不愿意均不显示CSS样式这一件事能与之比较。目前，Opera是唯一一个当script语句失效时能提供显式控制界面的浏览器。其余的浏览器严格意义上来说都违背了HTML5的规格，尽管我无法找出这些浏览器中任何的bug来质问此行为。然而，依旧存在一些与HTML5规格相违背的移除不寻常的备用特性的bug存在。但是由于我们并不知道这些bug会不会导致HTML5规格的变化，你还是需要在script语句有效和无效的情形下分别特使你的HTML媒体元素，无论你最终是不是想在页面中使用script语句。

　　另一个浏览器的小缺陷：当script语句无效时，目前来说Firefox显式一个控制UI（即用户界面）即使你添加了controls属性。你需要使用鼠标右键环境菜单来控制媒体。详见第二章。　

对多中媒体文件类型的支持

　　图1-1显示了在Firefox浏览器中例子1-1使用Firefox提供的默认控制界面的显示结果。你可能会好奇audio元素控制界面在其他浏览器中的默认样式，例如IE9.x。如果你用IE9打开此页面，你会看到一个小黑盒和一个代表损坏内容的小红叉。出现内容损坏提示的原因是audio元素载入了一种类型的音频内容——编码为Ogg Vorbis的音频文件。微软在IE中并不支持Ogg Vorbis格式。

　　你可以再IE 9中播放Ogg Vorbis文件如果你安装了支持的软件。对此后面的章节会有更多详细的内容。

　　在我们所有的目标浏览器中测试此页面，我们发现音频文件在Chrome、Opera和Firefox中工作正常，但是在IE和Safari众工作不正常。在IE中音频元素显示为损坏内容，然而在Safari中控制界面出现但是当你点击play键时并没有什么反应

　　在稍后的章节中我们会深入讨论支持audio和video元素的解码器和浏览器，然而现在，让我们来讨论应该如何确保媒体文件在所有的目标浏览器中都正常工作。这次，我们将video元素加入页面中。在例子1-2中，网页包含一个video元素，但是在src属性中不止提供了一个视频文件地址，而是三个不同的视频文件。每个视频文件的地址在目标元素的src属性中被给出。

　　例子1-2 嵌入HTML5网页并拥有三种视频类型的video元素

1 <!DOCTYPE html>
2 <head>
3 <title>Video</title>
4 <metacharset="utf-8" />
5 </head>
6 <body>
7 <videoid="meadow"controls>
8 <sourcesrc="videofile.mp4" />
9 <sourcesrc="videofile.ogv" />
10 <sourcesrc="videofile.webm" />
11 </video>
12 </body>

　　　video和audio元素都可以包含0个或多个资源元素。这些子元素定义了一种区分多种音频和视频文件格式的方式。如果浏览器不支持一种格式，但愿它能在资源元素中找到另一种它支持的格式。

　　　如果你在audio和video元素中使用了src属性，那么任何包含在其中的资源元素将会被忽略。都使用得话也会导致HTML5验证器一致错误。因此，使用一个，不要两个都要使用。

　　要是浏览器或者客户端都没有发现自己支持的视频或音频格式会发生什么？这两张媒体元素均不允许其他的HTML语句存在于它的开标签和闭标签之间，那么其他的HTML语句能作为备用内容吗？

　　不幸的是，答案是"不可以"。你可以在媒体元素之间包括其他内容，但是这些内容只是为不支持audio和video元素的浏览器和客户端准备的。例如，你在一个旧版本的浏览器下打开了包含例子1-3中所示HTML语句的网页，例如IE 8（或者在兼容模式下运行的IE 9)，则YouTube视频而不是内嵌视频将会播放。

　　例子1-3 包含三种不同视频格式以及一个为不支持HTML5 Video 元素的浏览器和客户端准备的后备内容的HTML5网页

1 <!DOCTYPE html>
2 <head>
3 <title>Big Buck Bunny Movie</title>
4 <metacharset="utf-8" />
5 </head>
6 <body>
7 <videocontrols>
8 <sourcesrc="videofile.mp4" />
9 <sourcesrc="videofile.ogv" />
10 <sourcesrc="videofile.webm" />
11 <iframewidth="640"height="390"
12 src="http://www.youtube.com/embed/YE7VzlLtp-4">
13 </iframe>
14 </video>
15 </body>

　　老版本的浏览器，例如IE 7或者IE 8，可以播放YouTube视频，这样确保了使用老版本浏览器渲染的网页也可以获得网页内容。然而，如果你移除了Ogg Vorbis和WebM资源元素然后再Firefox中打开该页面，你看到的只是一个带有浅灰色叉的方形灰色盒子，因为Firefox找不到一个能够播放的视频。YouTube视频同时也不会播放。

　　确保视频能在所有目标浏览器和其他客户端下能够播放的唯一方法是提供所有合适的视频格式。
　　

　　在讨论编解码器之前，一件非常重要的事是你可以再audio元素下使用视频文件，也可以在video元素下使用音频文件。两者之间的唯一不同之处在于video元素提供了一个播放区域。所有的浏览器都支持在video元素中使用音频文件，但是目前只有Opera和Firefox支持在audio元素下使用视频文件。我强烈推荐使用合适的元素。

喋喋不休音频和视频文件以及资源元素的细节

　　当讨论到媒体文件类型时，我们通常会讨论两方面的内容：用于编码和解码视频或音频文件流的软件（即编解码器，编码-解码器的缩写），以及容器，即一个包含的媒体流和数据以及元数据如何共存的包裹器格式。容器的一个例子是开源Ogg（来自Xiph.Org），编解码器的一个例子是VP8，一个来自于On2（和Google）的有损视频压缩格式。严格意义上来说，一个编解码器可以被夺走不同容器使用，而容器可以包裹夺走不同的编解码器，但是当我们讨论浏览器的支持格式时通常考虑一组容器/编解码器。

　　音频文件是包裹着一种媒体数据的——即音频流——的容器，而视频文件一般包裹着两种不同的媒体流：视频数据流以及音频数据流。另外，容器也能支持子标题和字幕，以及那些使数据轨道保持同步的信息。

　　尽管你能将子标题直接嵌入到包含一些容器的文件中，HTML5视频提供了一种合并的外来子标题文件的手段。我们将在第三章中更多的探讨合并子标题以及其他可存取的特征。

HTML5 音频编解码器/容器以及无损和有损压缩

　　和图像容器一样，例如JPEG和PNG，音频和视频编解码器也有无损和有损之分。一个无损视频或音频编解码器在压缩时保留了多有的媒体文件数据。而有损压缩技术则在数据编码时发生数据损失。

　　尽管大部分人拥有可以下载无损图像例如PNG的带宽条件，然而加载无损视频却大大超出了哪怕是最好的宽带配置的能力范围，因此HTML5仅支持有损的编解码格式。音频则稍有不同。audio元素支持无压缩的音频文件，也同时支持无损和有损的编解码格式。

WAV音频格式

　　一种历史悠久且熟悉的音频文件格式是波形音频文件格式（WAVE），也因为它的文件后缀名(.wav)而被称为WAV文件。虽然WAV文件支持压缩，但是大多数WAV文件包含一种无压缩的脉冲电码调变(PCM)音频，这意味着文件通常会很大。

　　Safari、Chrome、Firefox和Opera支持无压缩的WAV文件。但是，文件的大小决定了WAV文件不能成为HTML5的一种流行的文件格式。

MP3

　　另一种广为人知的普遍的音频格式是动态影像专家压缩标准音频层面3，也因为它的文件后缀名(.mp3)而被成为MP3文件。，据我们所了解，它既不是一种容器也不是编解码器。相反，同时一种元数据被直接插入的多合一有损压缩音频文件。

　　目前，微软IE 9以及以上默认支持的唯一格式是MP3。另外，Safari和Chrome同样支持此格式。然而，Firefox以及Opera因为专利以及版税原因从一开始便拒绝支持MP3文件格式。

　　MP3在大多数的操作系统环境下都得到了支持，MP3文件也是链接到网页的一种流行的备用方式。即使文件不能在浏览器中实现本地播放，在大多数环境下点击链接将会触发媒体播放器：

1 <audioid="background"autoplay loop>
2 <sourcesrc="audiofile.mp3"type="audio/mpeg" />
3 <sourcesrc="audiofile.ogg"type="audio/ogg" />
4 <p><ahref="audiofile.mp3">Your audio file fallback</a></p>
5 </audio>

　　Safari需要安装QuickTime并且支持任何QuickTime在本地系统中支持的媒体类型。由于QuickTime支持MP3和WAV，Safari支持MP3和WAV。

Ogg Vorbis

　　当媒体元素第一次被添加到HTML5中时，其规则要求所有的客户端都支持Ogg开源容器。此Ogg容器由Xiph.Org基金会发展而来，与其一起发展而来的还有一个叫做Vorbis的音频编解码器。

转载于:https://www.cnblogs.com/yingjun/p/3163408.html

HTML5 Media 原创翻译——第一章（持续更新中）相关推荐

绿箭侠第一季持续更新中....
第一集: thunder://QUFmdHA6Ly90djp0dkB4bGguMnR1LmNjOjMxNDUzL8LMvP3PwC9b0bjA18/C1Nh3d3cuMnR1LmNjXcLMvP3Pw ...
HTML5——表格及表格属性（持续更新中....）
1.表格概述在HTML中可以使用表格table标记将一组相关数据直观.明了地展现给网络访问者. 表格以简洁明了和高效快捷的方式将图片.文本.数据和表单的元素有序地显示在页面上,从而设计出漂亮的页面. ...
Redis-6.2.x版本官方发行说明（附谷歌翻译）【持续更新】
一.前言本文只是单纯地翻译Redis官方的6.2.x版本的发行说明,不会对发行说明内容做任何改动,读者如果觉得有异议,可自行去Redis官方相关网页查阅.翻译工具翻译出来的不一定百分百准确,英语 ...
Redis-7.0.x版本官方发行说明（附谷歌翻译）【持续更新】
一.前言本文使用谷歌翻译工具翻译Redis官方的7.0.x版本的发行说明,在此之前,笔者也翻译了6.2.x版本的发行说明--<Redis-6.2.x版本官方发行说明(附谷歌翻译)[持续更新 ...
这些开源项目，你都知道吗？（持续更新中...）[原创]
原文这些开源项目,你都知道吗?(持续更新中...)[原创] Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json ...
The OpenGL® Shading Language, Version 4.60.7 翻译第一章
The OpenGL® Shading Language, Version 4.60.7 翻译第一章 Chapter 1. Introduction This document specifies o ...
欢迎关注公众号：Android系统攻城狮原创持续更新中！！！
公众号:Android系统攻城狮简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案.音视频.编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列[原创干 ...
【Spring Boot官方文档原文理解翻译-持续更新中】
[Spring Boot官方文档原文理解翻译-持续更新中] 文章目录 [Spring Boot官方文档原文理解翻译-持续更新中] Chapter 4. Getting Started 4.1. Int ...
嵌入式相关开源项目、库、资料------持续更新中
学习初期最难找的就是找学习资料了,本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言.单片机.开源项目.物联网.操作系统.Linux.计算机等资源,并且在不断地更新中,致力于打造全网最全的嵌入式资 ...
前端面试题（附答案）持续更新中……
前端面试笔记前言一.HTML篇 1.语义话的目的是什么?? 2.HTML5新特征??? 3.cookie与sessionStorage和localStorage的区别??? 二.CSS篇 1.cs ...

HTML5 Media 原创翻译——第一章（持续更新中）