HTML内容嵌入元素

2021-10-29    HTML 多媒体 嵌入元素 音视频 SVG 图片映射

picture

Picture 元素内容包含图片元素，使用 source 上提供多个来源，以便网页处理设备根据屏幕像素密度、视口大小、图片格式等其他因素选择合适的图片，以便显示。

1
2
3
4
5

<picture>
 <source srcset="smaller.jpg" media="(max-width: 768px)">
 <source srcset="default.jpg">
 <img srcset="default.jpg" alt="My default image">
</picture>

img

Img 元素用来在文档中插入图片。src 属性用来指定图片来源，alt 属性用来说明图片内容。

iframe

Iframe 元素生成内嵌框架，引用另外一个网页的内容。src 属性用来指定内嵌网页的地址。

1

<iframe src="http://ads.example.com/" width="468" height="60"></iframe>

embed

Embed 元素用来嵌入外部非 HTML 文档内容，比如 flash。

嵌入 flash

尽管 flash 内容在移动平台日渐式微，但由于已经创作了大量的 flash 内容，因此，我们也需要掌握在页面中嵌入 flash 的方法。可通过 embed 元素嵌入 flash，如下：

1

<embed src="media/css-change-colors.swf" type="application/x-shockwave-flash" width="1024" height="798"> </embed>

embed 元素的 src 属性用来指定 flash 所在位置，type 属性用来声明嵌入的内容为 flash，witdh 为宽度，height 为高度。

嵌入视频平台的内容

在国内外，有许多视频网站提供免费视频存储及在线播放服务，如优酷、youtube 等等，这些网站几乎都提供将其内容嵌入到其它页面的办法，以优酷为例，嵌入其内容的办法如下：

1

<embed src="http://player.youku.com/player.php/Type/Folder/Fid/27236393/Ob/1/sid/XMTU3MTQ1MjM3Mg==/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>

究其本质，还是在页面中嵌入 flash。

object

Object 元素用来嵌入外部对象，插入的对象视为图片元素。

video

Video 元素用来插入视频文件。通过 src, preload, autoplay, mediagroup, loop, muted, 以及 controls 属性控制视频内容及播放方式。

在 HTML5 中添加视频和添加音频的方式非常类似。使用 video 元素，配合 src 属性，就可以在页面中嵌入视频，其他属性如 autoplay、controls、loop 以及 preload 都和 audio 元素类似。与 audio 元素不同，vedio 元素还可以通过 poster 属性设定预览图片。例如：

1

<video src="back.ogv" controls poster="screenshot.jpg"></video>

.ogv 影片格式一个开放标准的视频格式，Firefox、Chrome、Opera 支持此格式，但 Safari 和 IE9 不支持，支持常用的mp4 视频格式的浏览器有 Safari（iPad、Windows、Mac OS）、Chrome、IE9，firefox 不支持 mp4 格式。

同音频一样，我们可以通过设定不同格式的文件，达到对不同浏览器的兼容：

1
2
3
4

<video controls>
  <source src="back.ogv" type="video/ogg">
  <source src="back.mp4" type="video/mp4">
</video>

audio

Audio 元素用来插入音频文件。音频文件的播放控制通过属性 src, preload, autoplay, mediagroup, loop, muted, 以及 controls 进行设置。

在 HTML5 之前，在页面中嵌入视音频，绝大多数情况下都需要借助 Flash 播放器，而 HTML5 提供了一种快速、简单的添加音频文件的途径，即使用 audio 元素。和 img 元素类似，audio 元素通过 src 属性指定文件所在位置，但与 img 不同的是，audio 元素有闭合标签，例如：

1

<audio src="Backroad.ogg"></audio>

上例的代码将播放当前页面所在目录中的 Backroad.ogg 音频文件。

Ogg 全称是 OGG Vorbis， 是一种音频压缩格式，类似于 MP3 等的音乐格式。但有一点不同的是，它是完全免费、开放和没有专利限制的。MP3 格式是受专利保护的，如果你想使用 MP3 格式发布自己的作品，则需要付给 Fraunhofer（发明 MP3 的公司）专利使用费。

设置音频播放属性

audio 元素除了具有 src 属性外，还有其他几个非常实用的属性，包括：

  1. autoplay 自动播放当前文件
  2. controls 显示音频播放器
  3. loop 循环播放
  4. preload 预载入音频文件，有三个值：none、auto、metadata，分别表示没有预载入的值、载入所有音频信息值和指定的音频信息值（如作者、时长等等）。

除 preload 之外，autoplay、 controls 和 loop 都是布尔属性，他们可以不设置值，当它们出现在属性声明中时，它们的值默认为 true。

audio 元素在默认情况下，并不会显示在页面中。如果 autoplay 属性出现在 audio 元素中，则当页面载入的时候，就开始播放音频。如果要显示控制器，则需要添加 controls 属性，如：

1

<audio src="Backroad.ogg" controls></audio>

指定多种音频格式

不同浏览器对音频格式的支持是不一致的，绝大多数浏览器都支持常见的音频格式，如。mp3、.wav 以及。ogg。HTML5 中可以使用 source 元素，指定多种格式，浏览器会依次判断并读取其支持的格式，例如：

1
2
3
4
5

<audio controls>
  <source src="Backroad.ogg" type="audio/ogg">
  <source src="Backroad.mp3" type="audio/mpeg">
  <source src="Backroad.wav" type="audio/wav">
</audio>

苹果公司的 Safari 浏览器不支持 ogg 格式，但支持 MP3 格式，因此，我们为同一个音频提供 ogg 和 mp3 格式，基本上就能确保大多数情况下音频文件的播放。

source

Source 元素的 src 属性指定媒体文件的来源。

1
2
3
4
5

<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
 ...
</video>

track

Track 元素为媒体文件提供基于时间线的文本信息，如不同语言的字幕。

1
2
3
4
5
6

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

map

Map 元素将图片和区域组合起来形成地图。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<IMG SRC="/images/menu.gif" USEMAP="#NAV">
<MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
</MAP>

area

Area 元素为图片的指定区域添加超级链接。

math

Math 元素用来在 HTML 文档中插入数学公式。

svg

Svg 元素用来嵌入 svg 格式图片。

扩展阅读资料

  1. https://www.w3.org/TR/2017/REC-html52-20171214/semantics-embedded-content.html#semantics-embedded-content