前言
当今互联网上的内容不仅限于文字和图片，也包括音频和视频。在网页中设置音频和视频不仅可以让网站更加生动，也可以增强用户的互动体验。本文将介绍如何在 HTML 中设置音频和视频。
1.设置音频：
使用<audio>元素可以嵌入音频文件，例如MP3、WAV等格式的音频文件。可以通过设置src属性指定音频文件的路径或URL，通过设置controls属性显示播放器控件，如播放/暂停按钮、音量控制等。
音频属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放，必须与muted属性联合使用才有效果 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮） |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | muted | 如果出现该属性，则音频输出为静音 |
| preload | auto、metadata、none | 规定当网页加载时，音频是否默认被加载以及如何被加载 |
| src | URL | 规定音频文件的 URL。 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频</title>
</head>
<body>
<!---##音频属性##
controls（控制播放暂停的按钮）-->
<!--音频-->
<audio src="../audios/我的作品1.mp4" controls ></audio>
</body>
</html>
效果：
2.设置视频：
使用<video>元素可以嵌入视频文件，例如MP4、WebM等格式的视频文件。可以通过设置src属性指定视频文件的路径或URL，通过设置controls属性显示播放器控件，如播放/暂停按钮、音量控制等。
音频和视频的属性有：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放，必须与muted属性联合使用才有效果 |
| controls | controls | 如果出现该属性，则向用户显示控件（比如播放/暂停按钮） |
| loop | loop | 如果出现该属性，则每当媒介文件完成播放后重新开始播放 |
| muted | muted | 如果出现该属性，则音频输出为静音 |
| preload | auto、metadata、none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性 |
| src | URL | 规定音频文件的 URL。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮 |
| width | pixels | 设置视频播放器的宽度 |
| height | pixels | 设置视频播放器的高度 |
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
支持的浏览器有：Firefox、Opera、Chrome
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
支持的浏览器有：IE9+、Chrome、Safari
虽然目前应用较广，单有专利保护，是收费在
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
支持的浏览器有：Chrome、Opera、Safari
专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
<style type="text/css">
.v1{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<!---##音频和视频的属性##
controls（控制播放暂停的按钮）
autoplay（自动播放）
muted（无限循环）
loop（无限循环）
poster（视频封面）--->
<video class="v1" src="../audios/我的作品1.mp4" controls autoplay muted loop poster="../image/rose.jpg" ></video>
</body>
</html>
html代码效果如下：
以上就是音频和视频标签的使用了 制作不易 谢谢观看❀
![# [NOIP2016 提高组] 玩具谜题#洛谷](https://img-blog.csdnimg.cn/img_convert/ff0ee9545bab74e7aa00ccbd7c0a962b.png)
