在HTML中如何设置音频和视频

1.设置音频：

使用<audio>元素可以嵌入音频文件，例如MP3、WAV等格式的音频文件。可以通过设置src属性指定音频文件的路径或URL，通过设置controls属性显示播放器控件，如播放/暂停按钮、音量控制等。

音频属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放，必须与muted属性联合使用才有效果
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
muted	muted	如果出现该属性，则音频输出为静音
preload	auto、metadata、none	规定当网页加载时，音频是否默认被加载以及如何被加载
src	URL	规定音频文件的 URL。

示例代码：

html 复制代码

<!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
专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用。

代码演示：

html 复制代码

<!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代码效果如下：

以上就是音频和视频标签的使用了制作不易谢谢观看❀

在HTML中如何设置音频和视频

目录

1.设置音频：

2.设置视频：