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

时间：2025-10-23 23:10:12|栏目：html5|点击：16 次

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

<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自动播放内容请搜索万象站长学堂以前的文章或继续浏览下面的相关文章，希望大家以后多多支持万象站长学堂！

上一篇：使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

栏目：html5

下一篇：HTML5之高度塌陷问题的解决

本文标题：HTML中实现音乐或视频自动播放案例详解

本文地址：https://zhanzhang.eapis.site/html/2008.html

html5

您可能感兴趣的文章

2025-10-22 16:37电脑族怎样保护颈椎 16招教你远离颈椎病
2025-10-24 01:52Https页面使用百度分享的解决方法
2025-10-22 17:44ebk3是什么格式 EBK3格式的文件打开方法
2025-10-24 02:33选购电脑的时候不得不注意的8个问题
2025-10-22 18:41bearshare.exe进程安全吗 bearshare是什么进程
2025-10-24 03:15电脑主板上CPU供电8+4pin或者8+8Pin一定要插满吗?
2025-10-22 19:30C盘AppData文件夹可以清理吗?C盘AppData文件夹清理方法
2025-10-24 04:03使用HTML和CSS实现文字镂空效果的代码示例
2025-10-22 20:45AmazeUI 平滑滚动效果的示例代码
2025-10-24 04:47闪迪SDSSDA240GZ25加强版怎么样 2016固态硬盘推荐

html5

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

您可能感兴趣的文章

阅读排行

推荐教程