多媒体标签

4.4 多媒体元素

图⽚<img>

像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。

• src 属性是必须的，嵌⼊图⽚的⽂件路径
• alt 属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示alt 属性中的⽂本
• decoding 解码⽅式：异步、同步
• loading 懒加载

<img src="yk.jpg" alt="ykjun">

<picture>

• 元素通过包含零或多个<source> 元素和⼀个<img> 元素来为不同的显示/设备场景提供相应的图像版本
• media属性：依据的媒体条件渲染相应的图⽚，类似媒体查询
• type属性：MIME类型，根据浏览器⽀持性渲染相应的图⽚

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

<figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容.

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

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

如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片

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

⾳视频

<video>/<audio>

• src 属性是必须的，嵌⼊视频⽂件路径
• controls 是否展示浏览器⾃带的控件，可以创建⾃定义控件
• autoplay 是否⾃动播放
• source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试)

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry, your brower doesn't support embedded videos.
</video>

<audio controls src="/xxx.mp3">
    Your brower deos not support the <code>audio</code> element.
</audio>

<video controls src="/friday.mp4">
    <track default kind="captions" srclang="en" src="friday.vtt"/>
    Sorry, your brower doesn't support embedded videos.
</video>

2.1 视频 video

支持的格式：MP4、WebM、Ogg

<video src="文件地址" controls="controls"></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	auto、metadata、none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	视频URL	要播放的视频的 URL。
poster	图片URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
muted	muted	如果出现该属性，视频的音频输出为静音。

2.2 音频 audio

支持的格式:mp3、wav、ogg

<audio src="文件地址" controls="controls"></audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
src	URL	要播放的音频的 URL。

• 谷歌浏览器把音频(JS)和视频(muted解决)自动播放禁止了