MDN-02、多媒体与嵌入

多媒体与嵌入

1. HTML中的图片

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

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

   注意：像和

   • 备选文本
     alt属性，用于在图片无法显示或不能被看到的情况。
   • 宽度和高度

   width和heigth。不应该使用HTML属性来改变图片的大小，如果设置的不合理，图片会失真。

   如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。

   • 图片标题

   title属性的信息，在鼠标悬浮到图片上时会显示。

   • 通过为图片搭配说明文字的方式来解说图片

   
     
     
   曼彻斯特大学博物馆展出的一只霸王龙的化石
   
   

   更好的方式是使用HTML5的

   和

   元素。它正是因为图片提供一个语义容器而被创造出来的。

   
     
     
   曼彻斯特大学博物馆展出的一只霸王龙的化石
   
   

   • css背景图片

   p {
     background-image: url("images/dinosaur.jpg");
   }
   

2. 视频和音频内容

   • 标签

   controls:用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口，同时你也可以使用合适的 JavaScript API构建控制接口。至少，这些媒体应该包括开始和停止，以及调整音量的功能。

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

   浏览器并不全支持相同的视频格式，所以你得使用几个不同格式的文件来兼容不同的浏览器。浏览器兼容情况

   新特性：

   • width和height：控制视频的尺寸。无论设置的值为多少，视频都会保持原有的纵横比
   • autoplay：自动播放
   • loop：循环播放
   • mute：默认静音
   • poster：这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
   • preloade：这个属性被用来缓冲较大的文件，有3个值可选：
   • none：不缓冲
   • auto：页面加载后缓存媒体文件
   • metadata：仅缓冲文件的元数据
   • 标签

   标签与 标签的使用方式几乎完全相同，只有有一些细微的差别：

   • 没有width和height属性
   • 没有preload属性

   除此之外， 标签支持所有 标签拥有的特性.

   • 显示音轨文本

   有了 WebVTT 格式，你可以使用 标签为音频添加副本。

   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 后缀名保存文件。
   • 用 标签链接 .vtt 文件， 标签需放在 或 标签当中，同时需要放在所有 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

   如下：

3. 使用SVG矢量图形

   3.1 使用插入矢量图形：

   在src上引用PNG或JPG，并在srcset上引用SVG矢量图片，这样在不支持矢量图片的浏览器上将加载PNG或JPG图片，在支持矢量图片的浏览器上将加载SVG图片。

   优点

   • 快速，熟悉的图像语法与alt属性中提供的内置文本等效。
   • 可以通过在元素嵌套，使图像轻松地成为超链接。

   缺点

   • 无法使用JavaScript操作图像。
   • 如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用）
   • 不能用CSS伪类来重设图像样式（如:focus）。

   3.2 使用标签

   你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将SVG内联或内联SVG。

   优点

   • 将 SVG 内联减少 HTTP 请求，可以减少加载时间。
   • 您可以为 SVG 元素分配class和id，并使用CSS修改样式，无论是在SVG中，还是HTML文档中的CSS样式规则。 实际上，您可以使用任何SVG外观属性作为CSS属性。
   • 内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。
   • 您可以通过将 SVG 标记包在元素中，使其成为超链接。

   缺点

   • 这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。
   • 额外的 SVG 代码会增加HTML文件的大小。
   • 浏览器不能像缓存普通图片一样缓存内联SVG。
   • 您可能会在元素中包含回退，但支持SVG的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

   3.3 在

   缺点

   • 如你所知， iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。
   • 此外，除非 SVG 和您当前的网页同源，否则你不能在主页面上使用 JavaScript 来操纵 SVG。

4. 响应式图片

   4.1 分辨率切换：不同的尺寸(Chrome似乎不支持)

   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语法结合

   在这种情况下，sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。

4.3

image