开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情

前言

最开始我们想在网页上播放音频或视频需要借助flash，随着技术发展我们可以用HTML5标签去实现这一功能，让多媒体播放更加方便，今天我们就能看一下HTML中的多媒体标签。

图片

img是一个单标签，它可以用来展示图片，有以下属性：

• src:图片路径，src是最重要的一个属性，只有src设置了并且路径也是图片正确的路径，图片才会显示出来，这个路径可以是绝对路径也可以是相对路径，总之要保证路径正确
• title:图片说明，当我们鼠标移动到图片上面会显示说明，很多标签也都有这个属性，效果是一样的。

   <img src="./img/4.png" title="图片" width="200px" height="200px">

• alt:图片未能正确加载的提示语句，正如我们上面所说路径正确图片才能显示出来，当路径不正确的时候，可以用alt设置提示语句。

   <img src="./img/5.png" alt="图片路径错误或不存在">

• width、height:设置图片的宽高。

音频

当我们想要播放音频文件时候，可以直接用audio标签，但是audio标签在每个浏览器中支持的文件格式不一样，MP3文件一般都支持，如果我们想要播放.wav,.pcm等格式的文件需要去处理一下。音频常用属性如下：

• src:音频路径，跟图片一样。
• loop:是否循环播放，属性值为布尔值，当我们想设置的时候，只写loop就行，会当成true来处理。
• controls:是否控制播放，设置为true时就会显示控制按钮。
• preload:加载方式，如果文件过大时候，我们可以设置该属性进行缓冲，该属性有三个值：
  auto:缓存音频文件。
  meta:只缓存元数据。
  none:音频文件不缓存。
  
• autoplay:是否立即播放，有该属性时文件加载好后就会立即播放。
• muted:是否关闭声音，有该属性时音频会是静音效果。 audio标签可以包裹提示信息，当浏览器不支持audio标签时会出现

   <audio src="./2.mp3" loop controls autoplay>
     <span>该浏览器不支持audio标签</span>
   </audio>

视频

video用来播放视频，它的用法跟属性基本上跟audio一致，video要比audio多几个属性：

• widht,height:宽高属性，音频不能设置宽高。
• poster:视频封面，属性值为图片的路径。

      <video src="./2.mp4" loop controls autoplay poster="./img/1.png">
    <span>该浏览器不支持video标签</span>
   </video>

总结

以上就是多媒体标签，当我们使用的时候一定要写对src，对于音频跟视频而言文件格式要正确，碰到不能解析的文件格式我们可以尝试转换一下文件格式。