HTML篇_第八章、HTML媒体、插件、音频、视频

HTML篇_第八章、HTML媒体

一、媒体

1.1什么是多媒体？

多媒体来自多种不同的格式。它可以是我们听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在因特网上，我们会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。在本章节中，我们将了解到不同的多媒体格式，以及如何在开发网页的时使用它们。

1.2HTML多媒体

Web 上的多媒体指的是音效、音乐、视频和动画。现代网络浏览器已支持很多多媒体格式。

1.3多媒体格式

通常确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是HTML页面。.xml扩展名指示XML文件，而.css扩展名指示样式表。图片格式则通过.gif或.jpg 来识别。多媒体元素也拥有带有不同扩展名的文件格式，比如.swf、.wmv、.mp3以及.mp4。

1.4浏览器支持

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。

1.5视频格式

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG	·.mpg ·.mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo	·.rm ·ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash	·.swf ·.flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

注意：最新的HTML5标准仅支持 MP4,WebM,和Ogg视频格式。

1.6音频格式

MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。如果开发的站点是音乐类型的，你可以选择mp3格式。

格式	文件	描述
MIDI	·.mid ·.midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。 因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio	·rm ·ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低
Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它
WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3	·.mp3 ·.mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它

二、插件

2.1HTML插件

插件的功能是扩展 HTML 浏览器的功能。

2.2HTML助手

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件，可用于播放音频和视频（以及其他）。辅助程序是使用<object>标签来加载的。使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。插件可以通过<object>标签或者<embed>标签添加在页面中。 大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

不过需要注意的是，现在大多数浏览器不再支持Java小程序和插件，大多数浏览器关闭了对Flash的支持。

2.3<object>元素

所有主流浏览器都支持<object>标签。该元素定义了在 HTML 文档中嵌入的对象。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

代码演示：

 <object width="50" height="50" data="demo.swf"></object> 

<object>元素同样可用于包含HTML文件：

代码演示：

 <object width="" height="" data="demo.html"></object> 

或者用来插入图片。

代码演示：

 <object data="demo.jpeg"></object> 

2.4<embed>

所有主流浏览器都支持<embed>元素,它表示一个 HTML Embed 对象。这个元素已经出现了很长时间了，但是在HTML5前并未被详细说明，该元素在HTML5页面上会被验证，在HTML4上则不会。需要注意的是，<embed>元素没有关闭标签，不能使用代替文本。

代码演示：

 <embed width="50" height="50" src="demo.swf"> 

<embed>元素也可用于包含HTML文件：

代码演示：

 <embed width="100%" height="500px" src="demo.html"> 

也可以插入一张图片。

代码演示：

 <embed src="audi.jpeg"> 

三、音频

3.1HTML音频

在HTML页面中播放音频需要熟悉大量技巧，以确保使用的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox,
Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

3.2使用插件

在HTML页面中播放音频的方式有很多，使用插件就是其中一种。这些方法不尽相同，使用时根据应用场景选择使用。

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件可以使用<object>标签 或者<embed>标签添加在页面上。 这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

• 使用<embed>元素
  <embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

代码演示：

<embed height="50" width="100" src="demo.mp3">

• 使用<object>元素

<object>标签也可以定义外部（非 HTML）内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

代码演示：

<object height="50" width="100" data="demo.mp3"></object>

注意：
不同的浏览器对音频支持的的格式不同，<embed>标签在HTML4是无效的，页面无法通过HTML4来验证，如果浏览器
不支持该文件格式，没有插件也无法播放该音频。如果用户的计算机未安转插件，无法播放音频。若该文件被转换为
其他格式，仍然无法在浏览器中播放。

3.3使用HTML5<audio>元素

HTML5<audio>元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

以下使用<audio>标签来描述MP3文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音频</title>
	</head>
	<body>
		<audio controls>
		  <source src="demo.mp3" type="audio/mpeg">
		  <source src="demo.ogg" type="audio/ogg">
		  浏览器不支持这个类型的音频格式
		</audio>
	</body>
</html>

注意：<audio>标签在HTML4是无效的，在老式浏览器中不起作用。使用时必须把音频文件转换为不同的格式。

3.4最好的解决方法

上述实例中使用了不同格式的音频文件，HTML5的<audio>元素会尝试以mp3或ogg来播放音频。如果失败，代码将回退尝试<embed>元素。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音频</title>
	</head>
	<body>
		<audio controls>
		    <source src="demo.mp3" type="audio/mpeg">
		    <source src="demo.ogg" type="audio/ogg">
		    <embed height="50" width="150" src="demo.mp3">
		</audio>
	</body>
</html>

注意：<embed>元素无法回退来显示错误信息，使用时必须把音频转换为不同的格式。

3.5使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音频</title>
	</head>
	<body>
		<a href="demo.mp3">播放音频</a>
	</body>
</html>

3.6内联声音说明

当开发的网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果打算在Web应用程序中使用内联声音，需要意识到很多人都觉得内联声音不尽人意。同时要注意，用户可能已经关闭了浏览器中的内联声音选项。

最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

四、视频

4.1HTML 视频

在 HTML 中播放视频的方法有很多种。可以使用<embed>标签、<object>标签以及<video>标签（HTML 5中启用）。在HTML中播放视频需要熟悉相关的技巧，以确保使用的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

4.2<video>标签

HTML5<video>标签定义了一个视频或者影片,该元素在所有现代浏览器中都支持。

以下HTML片段会显示一段嵌入网页的ogg、mp4或webm格式的视频：

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML视频</title>
	</head>
	<body>
		<video width="320" height="240" controls>
		  <source src="demo.mp4" type="video/mp4">
		  <source src="demo.ogg" type="video/ogg">
		  <source src="demo.webm" type="video/webm">
		  当前计算机不支持此类型的视频
		</video>
	</body>
</html>

注意：<video>元素在旧版本浏览器中无效，使用时必须把视频转换成多种不同格式。

4.3使用<embed>标签

若要在HTML中嵌入视频元素，可以使用<embed>标签来实现。下面实例为在网页内嵌入一段Flash视频。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML视频</title>
	</head>
	<body>
		<embed src="demo.swf" height="200" width="200">
		<p>如果看不到效果，则为当前计算机不支持该视频格式</p>
	</body>
</html>

4.4使用<object>标签

若要在HTML中嵌入视频元素，还可以使用<object>标签来实现。下面实例为在网页内嵌入一段Flash视频

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML视频</title>
	</head>
	<body>
		<object data="demo.swf" height="200" width="200"></object>
	</body>
</html>

注意：HTML4 无法识别<embed>标签。如果浏览器不支持Flash，视频则无法播放，iPad和iPhone就不支持Flash，
如歌视频被转换为其他格式也不能播放。

4.5解决方案

HTML5<video>元素会尝试播放以mp4、ogg或webm格式中的一种来播放视频。如果均失败，则回退到<embed>元素。使用时必须把视频转化为不同格式。

代码演示：

<!DOCTYPE html>
<html>
<head>        
    <meta charset = "utf-8">
    <title>HTML视频</title>        
</head>                
<body>
    <video width="320" height="240" controls autoplay>
        <source src="demo.ogg" type="video/ogg">
        <source src="demo.mp4" type="video/mp4">
        <source src="demoe.webm" type="video/webm">
        <object data="demo.mp4" width="320" height="240">
        <embed width="320" height="240" src="demo.swf">
        </object>
    </video>
</body>
</html>

4.6使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码实例显示指向AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如
Windows Media Player 来播放这个AVI文件。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML视频</title>
	</head>
	<body>
		<a href="demo.swf">播放视频文件</a>
	</body>
</html>

4.7关于内联视频的说明

当视频被包含在网页中时，它被称为内联视频。若在 web 应用程序中使用内联视频，需要意识到很多人都觉得内联视频不尽人意。同时要注意，用户可能已经关闭了浏览器中的内联视频选项。

最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

---

希望有所帮助！
关注我，持续更新！