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

发布时间：2024年01月05日

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代码效果如下：
在这里插入图片描述

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

文章来源:https://blog.csdn.net/2301_80263923/article/details/135269855
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

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

目录

1.设置音频：

2.设置视频：