HTML学习笔记2

HTML 多媒体

Web 上的多媒体指的是音效、音乐、视频和动画

多媒体格式

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

视频格式

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式,但非 Windows 计算机并不总是能够播放。
WMV	.wma	Windows Media 格式是由微软开发的。在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG	.mpge .mpg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 针对因特网开发的。
Flash	.flv .swf	Flash (Shockwave) 格式是由 Macromedia 开发的。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。

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

HTML 插件

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

<object>元素

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

<object width="400" height="50" data="bookmark.swf"></object>
<object> 元素同样可用于包含HTML文件：
<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 上不会。

HTML 音频

声音在HTML中可以以不听的方式播放。

使用<embed>元素

<embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
<embed height="50" width="100" src="horse.mp3">

使用 <object> 元素

<object tag>标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
object height="50" width="100" data="horse.mp3"></object>

使用 HTML5 <audio> 元素

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

最好的 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>

HTML 视频

HTML视频（Videos）播放

//使用 <embed> 标签
<embed src="intro.swf" height="200" width="200">
//使用 <object> 标签
<object data="intro.swf" height="200" width="200"></object>
//使用 HTML5 <video> 元素
<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">
Your browser does not support the video tag.
</video>
//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>