02 HTML基础-图片和音视频

1.HTML中的图片

HTML5的<figure>和<figcaption>为图片提供了一个语义容器，在标题和图片之间建立了清晰的联系。<figcaption>元素告诉浏览器和其他辅助的技术工具这段说明文字描述了<figure>元素的内容。<figure>可以是几张图片、一段代码、音视频、方程或表格等。

<figure>
  <img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1"
   alt="《肖申克的救赎》海报"
   height="300">
  <figcaption>故事发生在1947年，银行家安迪（Andy）被指控枪杀了妻子及其情人，安迪被判无期徒刑，这意味着他将在肖申克监狱中渡过余生。</figcaption>
</figure>

效果图如下：

故事发生在1947年，银行家安迪（Andy）被指控枪杀了妻子及其情人，安迪被判无期徒刑，这意味着他将在肖申克监狱中渡过余生。

小结：如果图像对您的内容有意义，则应该使用HTML图像。若纯粹是装饰，则应该使用CSS背景图片，能更好的控制图片和设置图片的位置。

2.HTML中的视频和音频

先看代码：

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

效果图如下：

你的浏览器不支持HTML5视频，可点击此链接观看

• 其中，src指向你要嵌入到网页中的视频资源；controls可控制回放以及音量功能。 <video>标签内的内容叫后备内容，当浏览器不支持<video>的时候，就会显示这段内容。
• 接下来，
  
  我们把src从<video>中移除，把它放在几个单独的<source>中，这样浏览器会先检查<source>，并且播放第一个与其自身相匹配的媒体，你的视频应当包括webm和mp4两种格式，目前这两种格式已经足够支持大多数平台和浏览器。<source>中的 type属性可选，建议加上，它包含了视频文件的MIME types，同时会跳过那些不支持的格式。若你不加的话，浏览器会尝试加载每一个文件，直到找到一个正确的格式，这样会消耗大量的时间和资源。

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

<audio>用法几乎与 <video>完全一样。

• 再来看一个非常有意义的标签 <track>，它可以给听不懂音频的/不方便播放音频的/听觉有障碍的人提供字幕。当然这就需要用到一个WebVTT文本格式，一个典型的WebVTT文件如下：

WEBVTT

1

00:00:22.230 --> 00:00:24.606

第一段字幕

2

00:00:30.739 --> 00:00:34.074

第二段

...

• 要以.vtt后缀名保存文件；
• <track>链接.vtt文件，需放在<audio>或<video>中，<source>之后，用kind指明是哪种类型(eg:subtitles/captions/descriptions)，用srclang告诉浏览器你使用的语言。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  <p>你的浏览器不支持HTML5视频，可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

你的浏览器不支持HTML5视频，可点击此链接观看

以上均是参考MDN web docs，总结出来的比较重要的知识点，与君共勉。不妥之处，还望大家及时提出！