code5. 多媒体与嵌入

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/%E6%96%87%E4%BB%B6%E5%92%8C%E7%BD%91%E7%AB%99%E7%BB%93%E6%9E%84

1. HTML 中的图片

 

语法：

其他属性：

• title 提示文字
• width
• height

1. 不应该使用HTML属性来改变图片的大小。
   尺寸设定太大，图片看起来会模糊；太小，会在下载远远大于你需要的图片时浪费带宽。
2. 在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。
3. 需要改变图片的尺寸，应该使用CSS而不是HTML。

给图片加标题

使用 figure ， figcaption
 

 


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

figure 里可以是除一张图片外的其他独立内容单元，如 多张图片，音视频，一段代码，方程，表格等

CSS 背景图片

使用 css 把图片嵌入到网站设置成背景图片

为所有的段落设置一个背景图片 ：

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

音频和视频

用到的标签：

语法

controls 添加浏览器的播放控件
也可以自己创建播放界面，界面中至少要包含开始、停止以及调整音量的功能。

举例：

使用多个播放源以提高兼容性

1. 每个 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性
2. type 包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。
3. 如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

容器格式 Media container formats (file types)

定义了构成媒体文件的音频轨道和视频轨道的储存结构，
其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

常见的媒体容器格式

MPEG-4 (MP4)
QuickTime Movie (MOV),
Wavefile Audio File Format (WAV).
MP3, Ogg, WebM （Web Media）, AVI

一个格式为 WebM 的电影包含视频轨道，音频轨道和文本轨道

1. 为了编解码器（codec）编码媒体，容器中的音频和视频轨道以适合的格式保存。
2. 音频轨道和视频轨道使用不同的格式。
3. 每个音频轨道都使用音频编解码器进行编码，而视频轨道则使用视频编解码器进行编码。
4. 不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频）

其他 video 属性

1. width height
   设置视频的尺寸，也可以用 CSS 来控制

2. autoplay
   自动播放，不建议在网站上使用

3. loop
   循环播放，不建议使用

4. muted
   静音播放，默认关闭声音

5. poster
   指向了一个图像的URL， 这个图像会在视频播放前显示。（类似专辑封面）
   不能同时加 autoplay ， 否则就看不到poster的效果了

6. preload
   预加载，这个属性被用来缓冲较大的文件，有 3 个值可选 ：

• none 不缓冲
• auto 页面加载后缓存媒体文件
  -metadata 仅缓冲文件的元数据

audio

audio 标签与video 标签的使用方式几乎完全相同。

audio 因为没有视觉部件，所以不支持跟视觉部件相关的属性， weight ，height ， poster， 其他的video 属性都支持。

显示音轨文本

WebVTT 格式，用 标签
WebVTT 用来编写文本文件，该文件包含众多字符串，字符串会带一些元数据，描述该字符串在视频中显示的时间，或字符串定位信息和样式。
常见的样式有：

• subtitles
  添加翻译字幕

• captions
  同步翻译对白，或描述一些重要声音

• timed descriptions
  将文字转换为音频

让webVVT 文件和 HTML 媒体一起显示，需要做的工作：

1. 以 .vtt 后缀名保存文件
2. 用 track 标签链接 .vtt 文件
   track 标签需放在 audio ， video 标签当中 ， 且在所有 source标签之后 。
   用 kind 属性指明是哪一种类型，如 subtitles ， captions ， descriptions
   使用 srclang 来告诉浏览器你是用什么语言来编写的subtitles。