作为站长的都应该知道，适当在网页中插入音频和视频可以增强内容的可读性，尤其是随着宽带网络的普及，在网页中插入音乐和视频的作用也已经日益突显。

本文将详细讲解插入音频、插入视频的代码及属性设置。

向网页中嵌入视频

代码示例

<video src="./test.mp4" controls="controls" width="700px" height="400px">
您的浏览器不支持 video 标签
</video>

video元素中的常用属性：

支持的视频格式

这三种视频格式，在不同的浏览器中兼容性不同，所以我们可能需要在不同的浏览器中使用不同的视频格式。

<source>标签可以为媒体元素定义媒介资源，浏览器会根据需要来选择源文件：

<video controls="controls" width="700px" height="400px">
<source src="./test.mp4" type="video/mp4">
<source src="./test.ogg" type="video/ogg">
<source src="./test.webm" type="video/webm">
您的浏览器不支持 video 标签

</video>

<source>标签的三个属性：

向网页中嵌入音频

代码示例

<audio src="./test.mp3" controls="controls">
您的浏览器不支持 video 标签
</audio>

支持的音频格式

同样，<source>标签可以为媒体元素定义媒介资源

<audio controls="controls">
<source src="./test.mp3" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
<source src="./test.wav" type="audio/wav">

您的浏览器不支持 audio 标签
</audio>

audio元素中的常用属性和 video元素差不多，但是 audio元素中没有 width、height等属性。