福建二哥 › 门户 › 查看主题

HTML中实现音乐或视频自动播放案例详解

发布者: 福建二哥 | 发布时间: 2025-6-16 12:17| 查看数: 145| 评论数: 0|帖子模式

由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码

<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>

复制代码

但是效果并不理想，打开了网页并不会自动播放，于是乎，我百度了各种各样的方法，但始终没有实现想要的效果。于是在整理大作业的偶然间，我居然发现了真相！
首先看原本的代码打开路径,就是一个单纯的网页

myself.html

复制代码

再看能成功实现自动播放的网页路径

html/myself.html

复制代码

发现问题所在没？问题就出现在跳转上，也就是说想实现自动播放背景音乐的效果不能应用在首页路径上，而是要放在后面的路径。
举个栗子
看这是一个网页的时候

这是代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title></head><body><audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio></body></html>

复制代码

然而这实现不了自动播放的效果
下面重头戏来了
此时我创建了两个文件夹

index的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<a href="music.html">音乐</a>
</body>
</html>

复制代码

music的代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>music</title></head><body><audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio></body></html>

复制代码

这个就可实现自动播放的效果了
总结一下，两个方法在代码上没什么区别，第二种方法就是多了一个跳转网页的操作而已。小编推测可能是在html中音频自动播放需要缓冲时间，但是在单独使用一个网页时没有缓冲时间，而用跳转网页恰恰弥补了这一缓冲时间。
到此这篇关于HTML中实现音乐或视频自动播放的文章就介绍到这了,更多相关html自动播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/830018.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要登录才可以下载或查看，没有账号？立即注册

HTML中实现音乐或视频自动播放案例详解

本帖子中包含更多资源

最新评论

新人须知

常见问题

维权申诉

关注微博

扫描微信

关于合作

通讯联系