HTML 多媒体

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

浏览器支持

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

多媒体格式

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

视频格式

MP4是互联网推出新的视频格式。

YouTube 推荐使用 MP4 。

Flash Players 支持 MP4

HTML5 支持 MP4。

格式	文件	描述
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 的因特网共享格式。

声音格式

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

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 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 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

HTML 插件

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

HTML 助手（插件）

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

	可以使用 <video> 和 <audio> 标签来显示视频和音频

<object> 元素

所有主流浏览器都支持 <object> 标签。<object> 元素定义了在 HTML 文档中嵌入的对象。该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

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

<object width="100%" height="500px" data="snippet.html"></object>

插入一张图片:

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

<embed> 元素

所有主流浏览器都支持 <embed> 元素。<embed> 元素表示一个 HTML Embed 对象。<embed> 元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。

<embed width="400" height="50" src="bookmark.swf">

	注意 <embed> 元素没有关闭标签。不能使用替代文本。

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

或者插入一张图片:

<embed src="audi.jpeg">

HTML 音频(Audio)

声音在HTML中可以以不同的方式播放，在 HTML 中播放音频并不容易！需要谙熟大量技巧，以确保音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

使用插件

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

使用 <embed> 元素

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

问题:

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

使用 <object> 元素

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

问题:

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 HTML5 <audio> 元素

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

兼容

表格中的数字表示支持该属性的第一个浏览器版本号。

元素
<audio>	4.0	9.0	3.5	4.0	10.5

以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效):

<audio controls><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg">Your browser does not support this audio format.
</audio>

问题:

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

<audio controls height="100" width="100"><source src="horse.mp3" type="audio/mpeg"><source src="horse.ogg" type="audio/ogg"><embed height="50" width="100" src="horse.mp3">
</audio>

问题:

必须把音频转换为不同的格式。
<embed> 元素无法回退来显示错误消息。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

<a href="horse.mp3">Play the sound</a>

内联的声音说明

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。如果打算在 web 应用程序中使用内联声音，需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

HTML 多媒体标签

New : HTML5 新标签

标签	描述
<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。
<audio>New	定义了声音内容
<video>New	定义一个视频或者影片
<source>New	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

HTML 视频（Video）

在 HTML 中播放视频的方法有很多种。

HTML视频（Videos）播放

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>

问题以及解决方法

在 HTML 中播放视频并不容易！同样需要谙熟大量技巧，以确保视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

使用 <embed> 标签

<embed src="intro.swf" height="200" width="200">

问题

HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 <object> 标签

<object data="intro.swf" height="200" width="200"></object>

问题:

如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 HTML5 <video> 元素

HTML5 <video> 标签定义了一个视频或者影片，<video> 元素在所有现代浏览器中都支持。以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>

问题:

必须把视频转换为很多不同的格式。
<video> 元素在老式浏览器中无效。

最好的 HTML 解决方法

以下实例中使用了 4 种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML 5 + <object> + <embed>

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm"><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240"></object>
</video>

视频网站解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。如果希望在网页中播放视频，那么可以把视频上传到视频网站，然后在网页中插入 HTML 代码即可播放视频。在各大视频网站的分享入口，找到嵌入的 HTML 代码。

<embed src='https://player.youku.com/player.php/sid/XMTQ3MjM5Mjc0MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

<a href="intro.swf">Play a video file</a>

关于内联视频的说明

当视频被包含在网页中时，它被称为内联视频。如果打算在 web 应用程序中使用内联视频，需要意识到很多人都觉得内联视频令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联视频选项。最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

HTML 多媒体标签

New : HTML5新标签.

标签	描述
<embed>	定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>	定义内嵌对象。
<param>	定义对象的参数。
<audio>New	定义了声音内容
<video>New	定义一个视频或者影片
<source>New	定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New	规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

HTML学习教程之终极篇相关推荐

【教程】PHP快速学习教程(语法篇)
[教程]PHP快速学习教程(语法篇) 备注一.环境搭建 1.phpstudy一键搭建 2.apache+php+mysql手动配置 <1>apache加载php <2>php ...
终极版Python学习教程：一篇文章讲清楚Python虚拟环境
我在之前写过一篇Python学习教程,说过新手往往没有注意环境隔离,导致Python项目包与包之间冲突. 并且Python2与3代码执行有问题等等.鉴于此我决定今天的Python学习教程给大家聊聊关于 ...
Blender数字雕刻终极指南学习教程
CGBoost–Blender中的3D雕刻大师–数字雕刻终极指南大小:29G 含课程项目文件 Master 3D Sculpting in Blender – The Ultimate Guide ...
OpenCV学习系列教程第五篇：测试和提高代码的效率
Opencv-Python学习系列教程第五篇来自opencv-python官方学习文档,本人谨做翻译和注释,以及一些自己的理解本文由作者翻译并进行代码验证,转载请注明出处~ 官方文档请参阅:htt ...
【网络安全学习】渗透测试篇01-DVWA靶场环境搭建教程
渗透测试:通过经授权的模拟攻击,发现存在的漏洞,并以此对网络.主机.应用及数据的安全性进行评估. 靶场作用:在合法的环境下进行网络安全学习与演练目录为什么写这篇文章? 介绍及注意事项环境搭建 1 ...
深度学习小白入门教程-基础环境篇
深度学习小白入门教程-基础环境篇如有图片显示失败,请回小主主页查看~ Anaconda 安装包下载方式一:官网(科学上网比较慢,不推荐) 安装包下载方式二:清华镜像(推荐) 具体安装步骤(跟着箭头来 ...
【STM32】标准库与HAL库对照学习教程外设篇--红外避障传感器
[STM32]标准库与HAL库对照学习教程外设篇--红外避障传感器一.前言二.准备工作三.红外避障传感器 1.传感器原理说明 2.传感器特性四.标准库使用红外传感器 1.实验程序 2.实验效果 ...
【STM32】STM32标准库与HAL库对照学习教程特别篇--系统时钟RCC详讲
[STM32]STM32标准库与HAL库对照学习教程特别篇--系统时钟RCC详讲一.前言二.时钟是什么三.时钟树 1.时钟树图 2.时钟树讲解左边部分中间部分右边部分特殊部分四.初始化 ...
CRAB快速开发平台学习教程《一》：环境搭建篇
智能时代,软硬更新,实在太快.从最开始的只有少量外设资源的8051,到现在资源丰富性能超群的ARM,才经历短短十几二十年功夫.软件的功能也越来越多,代码量也越来越庞大,简易而快速开发的方式,貌似离我们 ...
【STM32】标准库与HAL库对照学习教程外设篇--超声波测距传感器
[STM32]标准库与HAL库对照学习教程外设篇--超声波测距传感器一.前言二.准备工作三.超声波测距传感器 1.原理说明 2.使用说明四.标准库使用传感器 1.实验程序 2.实验效果五.H ...

HTML学习教程之终极篇

HTML 多媒体

浏览器支持

多媒体格式

视频格式

声音格式

HTML 助手（插件）

<object> 元素

<embed> 元素

HTML 音频(Audio)

使用插件

使用 <embed> 元素

使用 <object> 元素

使用 HTML5 <audio> 元素

兼容

最好的 HTML 解决方法

使用超链接

内联的声音说明

HTML 多媒体标签

HTML 视频（Video）

HTML视频（Videos）播放

问题以及解决方法

使用 <embed> 标签

使用 <object> 标签

使用 HTML5 <video> 元素

最好的 HTML 解决方法

HTML 5 + <object> + <embed>

视频网站解决方案

使用超链接

关于内联视频的说明

HTML 多媒体标签

HTML学习教程之终极篇相关推荐

最新文章

热门文章