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 中的图片

 

语法：

 <img  src="图片路径"  alt=" 替换图片的文字描述" >

其他属性：

• title 提示文字
• width
• height

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

给图片加标题

使用 figure ， figcaption
 

 <figure>
<img src="images/dinosaur.jpg"  alt=" this is a dinosaur"
 width="200"
  height="171"
 title="曼彻斯特大学博物馆展出的一只霸王龙的化石"
>
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

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

CSS 背景图片

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

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

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

音频和视频

用到的标签： <audio> <video>

<video>

语法

<video src="视频资源来源"    controls>
当浏览器不支持 <video> 标签的时候，就会显示这段内容，不如 一个指向该视频的链接
</video>

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

举例：

<video src="rabbit.webm" controls >
 <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

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

<video controls>
<source  src="rabbit320.mp4 "   type = "video/mp4" >
<source src=" rabbit320.webm" type="video/webm">
</video>

1. 每个 <source> 标签页含有一个 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 属性

 <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>

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>
<>
<source src="viper.ogg" type="audio/ogg">
<source src="viper.mp3"  type= "audio/mp3">
</audio>

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

显示音轨文本

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

• subtitles
  添加翻译字幕

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

• timed descriptions
  将文字转换为音频

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

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

<video>
<source src="example.mp4" type="video/mp4">
<source src ="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles.vvt"  srclang="de">
</video>