5.图像，音视频标签

目录

1  图像标签 img

2  视频标签 video

3  音频标签 audio

---

1  图像标签 img

我们使用img作为图像标签，一般这样用

一般配合静态文件使用，src的值给静态文件的地址，地址就分直接地址和相对地址，根据后端不同的框架略有区分，关于地址问题可以看一下这个 8.静态文件_potato123232的博客-CSDN博客

它的效果是这样的

src是img标签的必选属性，其余为可选属性

我们首先看alt，当图像不能显示的时候会替换成文字

这里我搞一个不存在的图像写入src，他就不能显示了

它的效果是这样的

下面我们再看title,width,height,border，我把他们一起都写上

它的效果是这样的

• title经测试把鼠标放上可以出现文字，那个我截图截不了

一般来讲高度与宽度我们只改一个，改动一个后另一个值等比例缩放

border这个参数一般在css改，后面我们用的话会提到

2  视频标签 video

html只能支持部分格式的视频

mp4基本是都可以的，尽量使用mp4

这个标签的语法是这样的

controls并不是必选参数，我们先试一下，在我们html的项目同级路径下有一个video.mp4

打开后是这样的，能看见视频的第一帧，但是播放不了

现在我们加入controls

发现出现了播放按钮

发现了是可以播放的，并且它是有声音的

我们可以在chrome调试工具中看到它的前端代码，然后找到video标签，可以把视频搞下来。基本用video的都是一些广告视频，如果是视频网站上的视频它是不用video的

我感觉它现在太大了，我们可以给它设置宽与高

由于有的低版本浏览器不支持mp4文件，那么我们就要多搞几个不同格式的视频文件，然后这样写

这样写，它优先使用mp4，如果不支持mp4就使用ogg

src的文件名是自定的。type后面的值是固定的，后面的video与前面的video无关

如果几种都不行可以加上一串字符

这样如果都不支持，用户就会看到这个字符串了

video标签常用这些属性

• autoplay="autoplay"; 视频自动播放，如果是谷歌浏览器必须设置muted="muted"后自动播放才能生效
• controls="controls"; 显示播放控件
• width="像素值" 播放器宽度
• height="像素值" 播放器高度
• loop="loop" 循环播放
• preload="auto" 预先加载视频，如果设置了autoplay(自动播放)此属性作废
• preload="none" 不预先加载视频，默认值
• src="url" 视频地址
• poster="imgurl" 加载等待的画面图片，imgurl为图片的地址，没播放的时候展示的也是这个图片(无论加载是否完成)
• muted="muted" 静音播放，只是打开时静音，如果有播放控件你能从播放控件中把声音搞出来

3  音频标签 audio

音频同样有格式问题

我们一般用mp3就可以了

它的语法是这样的

controls同样不是必选参数，我们现在有一个mp3文件

打开后什么也没有，而且也不播放

现在我们加入播放器

这样它就可以播放了

兼容性问题的解决方案与上面视频标签类似

audio标签常见的属性有下面几个

• autoplay="autoplay" 自动播放，谷歌不行(也是设置静音之后可以自动播放，那我本来就听音频，静音之后就没有意义了)，js中有比较好的解决方案
• controls="controls" 显示播放器
• loop="loop" 循环播放
• src="url" 音频地址