audio或video标签的autoplay属性的说明

学习&实践爱好者

已于 2022-12-28 14:34:37 修改

阅读量3.6k

点赞数

分类专栏： JavaScrip技术 HTML5与CSS3 前端开发文章标签： javascript html

于 2022-12-27 20:44:36 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/128461126

版权

JavaScrip技术同时被 3 个专栏收录

149 篇文章

订阅专栏

HTML5与CSS3

98 篇文章

订阅专栏

前端开发

75 篇文章

订阅专栏

本文介绍了HTML中的<audio>和<video>标签的autoplay属性，探讨了其在网页背景音乐中的应用，并提供了代码示例。同时讨论了现代浏览器对autoplay功能的限制及如何解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

audio或video标签的autoplay属性的说明

<audio> 标签用于将声音内容嵌入文档中，例如音乐或其他音频流。

HTML audio 标签

<audio> - HTML（超文本标记语言） | MDN

<video> 标签用于将视频内容嵌入文档中，。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

HTML video 标签

<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN

想让内容自动播放的最简单方法是将autoplay属性添加到<audio>或<video>元素。但自动播放音频（或有声视频）可能会破坏用户体验，尽管自动播放媒体文件在某些情况下，如实现背景音乐时是一个很实用的功能，据新规则，可能需要在满足一定的条件才允许自动播放【可参见https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide】。

chrome、safari、firefox、edge等浏览器都在某版本后限制了audio自动播放功能，必须要用户与当前页面有交互后，例如下面的例子设置了按钮，当用户点击后播放。

使用<audio> 标签实现网页背景音乐播放源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<audio id="aid" autoplay loop src="./horse.mp3" ></audio>
<button type="button" id="unmuteButton">Click Me!</button>
<script>
    unmuteButton.addEventListener('click', function() {
         var music = document.getElementById("aid");//获取ID
          if (music.paused) { //判读是否播放
                music.paused=false;
                music.play(); //没有就播放
          }
    });
</script>
</body>
</html>

上面源码也可以写为（提示，仅JS部分的不同）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放 </title>
</head>
<body>
<audio id="aid" autoplay  loop src="./horse.mp3" ></audio>
<p>单击鼠标</p>
<script> 
    function SoundPlay() {
         var music = document.getElementById("aid");//获取ID
          if (music.paused) { //判读是否播放
                music.paused=false;
                music.play(); //没有就播放
          }
    }
    setInterval("SoundPlay()",1);
</script>
</body>
</html>

使用<video> 标签实现网页背景音乐播放源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<video id="vid" muted autoplay loop src="./horse.mp3" ></video>
<button type="button" id="unmuteButton">Click Me!</button>
<script>
    unmuteButton.addEventListener('click', function() {
        vid.muted = false;
    });
</script>
</body>
</html>

用户和页面之间有交互：其实就是指用户与页面要发生了事件，才算有交互。比如鼠标事件（单击 onclick，双击 ondblclick，按下 onmousedown，松开 onmouseup，右击 oncontextmenu 等），键盘事件（按下 onkeydown，松开 onkeyup 等）等。

既然是这样，那么在用户进入页面的时候，只要引导用户先去触发这些事件，背景音乐就能播放了，问题变相解决了，如上面的例子。