多媒体元素是 HTML5 的新元素，一共有两个，audio 元素表示音频，video 元素表示视频，当我们要在网页中插入视频的时候，就要用 video 元素，插入音频的时候，就要用 audio

video 元素

video 元素很简单，有一个 src 属性就是用来表示视频路径的

<video src=""></video>

一般来说，网页视频的格式多用 mp 4 和 webm

这个 video 元素里面有一些属性可以控制这个播放界面，一一介绍

• controls：控制播放控件的显示
• autoplay：进入网页之后是否自动播放
• muted：是否静音播放
• loop：播放完后是否循环播放

这四个属性均为布尔类型的属性，需要注意一个细节，在很多浏览器中都默认不允许自动播放，因为一打开网站就默认播放带声音的视频其实对用户并不友好，为了提升用户体验就会采用这种策略，如果我们发现 autoplay 失效了，那就加上 muted 即可，浏览器会默认禁止带声音的自动播放，但一般不会禁用静音视频的播放。

布尔属性

在前面我们学习的 HTML 元素属性中，都是键值对的形式，也就是说一个属性名一个属性值一一对应，但是这里我们学到了一个新的属性，叫做布尔属性，因为有一些属性只有两种状态，比如自动播放，要么就是自动播放，要么就不自动播放，只有这两种状态，这种只有两个状态的属性就叫做布尔属性，如果不写，那就默认就是没有，如果写了，那么这个布尔属性的值只能是属性名，比如添加 loop 属性就得写成 loop="loop"，autoplay 属性就要写成 autoplay="autoplay"。 在 HTML 5 标准中，这种布尔属性我们可以只写属性名，不写属性值。

<video src="./test.mp4" muted loop autoplay controls></video>

这就是一个自动静音循环播放并且带控制条的视频

audio 元素

audio 元素的用法和 video 元素完全一致，这里举一个例子即可

<audio src="./test.mp3" muted loop autoplay controls></audio>

这就是一个自动静音循环播放并且带控制条的音频

这个元素的用法和 video 元素一模一样，只不过一个是视频一个是音频，所以不过多赘述

兼容性的问题

在兼容性方面可能会存在以下两个问题

1. 这两个元素是 HTML 5 新元素，旧版本浏览器不支持 audio 和 video 元素
2. 不同的浏览器支持的音视频格式不一样，可能某些浏览器不支持某些音视频格式

为了解决这两个问题，引入一个新的路径写法，我们前面写路径的时候都是将路径写在 src 里面的，但实际上一般考虑到兼容性，我们都会这么写

<video muted loop autoplay controls>
	<source src="./test.mp4">
	<source src="./test.webm">
	<p>
		对不起，你的浏览器版本过低，点击<a src="https://www.google.cn/chrome/index.html">这里</a>下载新版本浏览器
	</p>
</video>

我们只需要在 video/audio 元素里面添加 source 元素，然后再 source 元素里写路径即可，浏览器会从上往下依次找，这里第一个 source 元素是 test.mp4，如果我浏览器可以播放这个视频，那就直接播放，忽略后面的内容，如果我的浏览器就是不支持 mp4，那就会找第二个 source，就这样从上往后依次找

但如果我的浏览器版本低，并不支持 audio 和 video 元素，那就会直接显示后面那个 p 元素的内容，当然我们也可以嵌入一个 flash。

这种写法就直接就解决了两个兼容性问题。