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

2333 0
Honkers 2022-10-19 16:51:58 | 显示全部楼层 |阅读模式
由于期末大作业我想插入一个背景音乐,实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码

<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自动播放内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章,希望大家以后多多支持中国红客联盟!

本帖子中包含更多资源

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

×
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3155
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒,什么都没留下!

中国红客联盟公众号

联系站长QQ:5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行