HTML多媒体与嵌入
本笔记记于2021年，摘自MDN HTML板块
1.搜索引擎也读取图像的文件名并把它们计入SEO
2.<img>和<video>
有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身
3.需要备选文本(alt添加描述文字)
- 用户有视力障碍，通过屏幕阅读器来浏览网页
- 图片的路径或文件名拼错
- 浏览器不支持该图片类型
某些用户仍在使用纯文本的浏览器，例如Lynx，这些浏览器会把图片替换为描述文本 - 想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配
- 用户关闭的图片显示以减少数据的传输
4.使用 <figure>和<figcaption>
为图片提供一个语义容器，在标题和图片之间建立清晰的关联
5.video视频
当中的一些属性如下:
- src：同
<img>标签使用方式相同，src属性指向想要嵌入网页当中的视频资源，他们的使用方式完全相同 - controls：用户必须能够控制视频和音频的回放功能
可以使用controls来包含浏览器提供的控件界面，同时也可以使用合适的 JavaScript API创建自己的界面
界面中至少要包含开始、停止以及调整音量的功能
<video> 标签内的内容
叫做后备内容
当浏览器不支持 <video> 标签的时候，就会显示这段内容，能够对旧的浏览器提供回退内容
可以提供一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持
音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件
新的特性：
width，height，设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色
- autoplay，这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全
- loop，这个属性可以让音频或者视频文件循环播放
- muted，这个属性会导致媒体播放时，默认关闭声音
- poster，指向了一个图像的URL，这个图像会在视频播放前显示
通常用于粗略的预览或者广告 - preload，这个属性被用来缓冲较大的文件，有3个值可选：
"none" ：不缓冲
"auto" ：页面加载后缓存媒体文件
"metadata" ：仅缓冲文件的元数据
6.audio音频（<audio>标签支持所有<video> 标签拥有的特性 ）
-
<audio>标签不支持width/height属性 — 由于其并没有视觉部件，也就没有可以设置width/height的内容 - 同时也不支持 poster 属性 — 同样，没有视觉部件
- 任何时候，都可以在 Javascript 中调用
load()方法来重置媒体
如果有多个由<source>标签指定的媒体来源，浏览器会从选择媒体来源开始重新加载媒体 - 可以监控媒体元素中的音频轨道，当音轨被添加或删除时，可以通过监听相关事件来侦测到
具体来说，通过监听AudioTrackList对象的addtrack事件（即HTMLMediaElement.audioTracks对象），可以及时对音轨的增加做出响应
const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
audioTrackAdded(event.track);
}
WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息
<dl>
<dt>subtitles</dt>
<dd>通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容</dd>
<dt>captions</dt>
<dd>同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容</dd>
<dt>timed descriptions</dt>
<dd>将文字转换为音频，用于服务那些有视觉障碍的人</dd>
</dl>
<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>
让其与 HTML 媒体一起显示，需要做如下工作：
1). 以 .vtt 后缀名保存文件
2). 用 <track>标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后
使用 kind属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions
然后，使用 srclang来告诉浏览器是用什么语言来编写的 subtitles
文本轨道会使网站更容易被搜索引擎抓取到 SEO， 由于搜索引擎的文本抓取能力非常强大，使用文本轨道甚至可以让搜索引擎通过视频的内容直接链接
7.其他嵌入技术
在网页中嵌入各种内容类型的元素：
<iframe>，用于嵌入其他网页
<embed> ，<object> ，两个元素则允许嵌入PDF，SVG，甚至Flash
iframe基本要素：
allowfullscreen，全屏模式（稍微超出本文的范围）
frameborder，如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为
0删除边框
不推荐这样设置，因为在CSS中可以更好地实现相同的效果
border``: none;
src，指向要嵌入文档的URL路径
width，height，指定iframe的宽度和高度
备选内容：在<iframe></iframe>标签之间包含备选内容，如果浏览器不支持<iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接
现在几乎不可能遇到任何不支持<iframe>的浏览器
sandbox，该属性需要在已经支持其他<iframe>功能（例如IE 10及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置
不应该同时添加allow-scripts和allow-same-origin到sandbox属性中-在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用JavaScript完全关闭沙盒
HTTPS
HTTPS减少了远程内容在传输过程中被篡改的机会，
HTTPS防止嵌入式内容访问父文档中的内容，反之亦然
插件是一种对浏览器原生无法读取的内容提供访问权限的软件
8.矢量图
矢量图形在很多情况下非常有用 — 它们拥有较小的文件尺寸，却高度可缩放，所以它们不会在镜头拉近或者放大图像时像素化
位图和矢量图:
- 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息
流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.) - 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子
SVG格式可以让我们创造用于 Web 的精彩的矢量图形
矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息
svg是什么
SVG是用于描述矢量图像的XML语言
SVG用于标记图形，而不是内容
9.响应式图片
！！！需要反复查阅实践
我们可以使用img两个新的属性——srcset和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源
<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">
<picture>让我们能继续满足老式浏览器的需要
