12音频&视频标签

原创已于 2023-12-16 10:00:33 修改 · 68 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2023-12-16 09:58:09 首次发布

html 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了HTML中的音频和视频标签（<audio>和<video>）的语法、必需属性如src、controls等，以及可选属性如loop和autoplay，并提供了使用示例。特别提到浏览器对autoplay的限制。

12音频&视频标签

音频标签

语法

<audio src="URL" controls loop autoplay>标签名</audio>

属性

src 音频地址，必需属性

controls 显示音频控制面板

loop 循环播放

autoplay 自动播放

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 音频标签   标签属性名和属性值一样可简化为属性名   浏览器一般禁用自动播放，所以autoplay属性不生效 -->
    <audio src="./资料/media/music.mp3" controls loop autoplay>标签名</audio>
</body>
</html>

视频标签

语法

<video src="URL" controls loop muted autoplay></video>

属性

src 视频地址，必需属性

controls 显示视频控制面板

loop 循环播放

muted 静音

autoplay 自动播放

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 音频标签   标签属性名和属性值一样可简化为属性名   浏览器一般禁用自动播放，所以autoplay属性不生效 -->
    <audio src="./资料/media/music.mp3" controls loop autoplay>标签名</audio>
    <!-- 视频标签   标签属性与音频一样，多了一个静音属性muted，结合muted和autoplay属性可静音播放视频 -->
    <video src="./资料/media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>