MDN-02、多媒体与嵌入-优快云博客

本文链接：https://blog.youkuaiyun.com/AbstractLiu/article/details/105382393

多媒体与嵌入

HTML中的图片

<img/>标签用来把图片放在网页中。它不需要包含文本内容或闭合标签，最少只需要一个src来使其生效。

src属性包含一个指向图片的路径，可以是绝对路径或相对路径。

注意：像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。
- 备选文本
  alt属性，用于在图片无法显示或不能被看到的情况。
```
<img src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
       it has a large head with long sharp teeth">
```
- 宽度和高度
width和heigth。不应该使用HTML属性来改变图片的大小，如果设置的不合理，图片会失真。

如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。
- 图片标题
title属性的信息，在鼠标悬浮到图片上时会显示。
- 通过为图片搭配说明文字的方式来解说图片
```
<div class="figure">
  <img src="/images/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>
```
更好的方式是使用HTML5的<figure>和<figcaption>元素。它正是因为图片提供一个语义容器而被创造出来的。
```
<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
```
- css背景图片
```
p {
  background-image: url("images/dinosaur.jpg");
}
```
视频和音频内容
- <video>标签
```
<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
```
controls:用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口，同时你也可以使用合适的 JavaScript API构建控制接口。至少，这些媒体应该包括开始和停止，以及调整音量的功能。

<video> 这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。

浏览器并不全支持相同的视频格式，所以你得使用几个不同格式的文件来兼容不同的浏览器。浏览器兼容情况
```
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
```
新特性：
- width和height：控制视频的尺寸。无论设置的值为多少，视频都会保持原有的纵横比
- autoplay：自动播放
- loop：循环播放
- mute：默认静音
- poster：这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
- preloade：这个属性被用来缓冲较大的文件，有3个值可选：
- none：不缓冲
- auto：页面加载后缓存媒体文件
- metadata：仅缓冲文件的元数据
```
<video controls="" width="400" height="400" loop="" muted="" preload="auto" poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
```
- <audio>标签
<audio> 标签与 <video> 标签的使用方式几乎完全相同，只有有一些细微的差别：
- 没有width和height属性
- 没有preload属性
除此之外，<audio> 标签支持所有 <video> 标签拥有的特性.
```
<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>
```
- 显示音轨文本
有了 WebVTT 格式，你可以使用 <track> 标签为音频添加副本。

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：

subtitles：

通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions：

同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。

timed descriptions：

将文字转换为音频，用于服务那些有视觉障碍的人。

一个典型的WebVtt文件如下：
```
WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...
```
让其与 HTML 媒体一起显示，你需要做如下工作：
- 以 .vtt 后缀名保存文件。
- 用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。
如下：
```
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
```
使用SVG矢量图形

3.1 使用<img/>插入矢量图形：
```
 <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
```
在src上引用PNG或JPG，并在srcset上引用SVG矢量图片，这样在不支持矢量图片的浏览器上将加载PNG或JPG图片，在支持矢量图片的浏览器上将加载SVG图片。

优点
- 快速，熟悉的图像语法与alt属性中提供的内置文本等效。
- 可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接。
缺点
- 无法使用JavaScript操作图像。
- 如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。（从SVG文件调用的外部样式表不起作用）
- 不能用CSS伪类来重设图像样式（如:focus）。
3.2 使用<svg>标签
```
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>
```
你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将SVG内联或内联SVG。

优点
- 将 SVG 内联减少 HTTP 请求，可以减少加载时间。
- 您可以为 SVG 元素分配class和id，并使用CSS修改样式，无论是在SVG中，还是HTML文档中的CSS样式规则。实际上，您可以使用任何SVG外观属性作为CSS属性。
- 内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。
- 您可以通过将 SVG 标记包在<a>元素中，使其成为超链接。
缺点
- 这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。
- 额外的 SVG 代码会增加HTML文件的大小。
- 浏览器不能像缓存普通图片一样缓存内联SVG。
- 您可能会在<foreignObject>元素中包含回退，但支持SVG的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。
3.3 在<iframe>中嵌入SVG
```
<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
```
缺点
- 如你所知， iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。
- 此外，除非 SVG 和您当前的网页同源，否则你不能在主页面上使用 JavaScript 来操纵 SVG。
响应式图片

4.1 分辨率切换：不同的尺寸(Chrome似乎不支持)
```
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
```
srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：
- 一个文件名 (elva-fairy-480w.jpg.)
- 一个空格
- 图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到
sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：
- 一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。
- 一个空格
- 当媒体条件为真时，图像将填充的槽的宽度（440px）
所以，有了这些属性，浏览器会：
1. 查看设备宽度
2. 检查sizes列表中哪个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小
4. 加载srcset列表中引用的最接近所选的槽大小的图像
4.2 分辨率切换: 相同的尺寸, 不同的分辨率(Chrome似乎不支持)

如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x语法结合
```
<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
```
在这种情况下，sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。

4.3 <picture>

 <picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
 </picture>

image