HTML-音频和视频标签

最新推荐文章于 2025-06-04 20:00:00 发布

原创最新推荐文章于 2025-06-04 20:00:00 发布 · 525 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #音视频 #前端

音频标签：<audio src="音频的URL"></audio>

常见属性：

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体标签-音频和视频</title>
</head>
<body>
    <!-- 在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
    <!-- controls-显示音频控制面板 -->
    <!-- loop-循环播放 -->
    <!-- autoplay-自动播放 -->
    <audio src="#" controls="controls" loop autoplay>音频标签</audio>
</body>
</html>

运行结果：

视频标签：<video src="视频的URL"></video>

常见属性：

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、Ogg、WebM
controls	显示音频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体标签-音频和视频</title>
</head>

<body>
    <!-- controls-显示视频控制面板 -->
    <!-- loop-循环播放 -->
    <!-- muted-静音播放 -->
    <!-- autoplay-自动播放 -->
    <video src="#" controls loop muted autoplay>视频标签</video>
</body>

</html>

运行结果：