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

ID:16204 / 打印

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

 <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中音频自动播放需要缓冲时间,但是在单独使用一个网页时没有缓冲时间,而用跳转网页恰恰弥补了这一缓冲时间。

上一篇: HTML5之高度塌陷问题的解决
下一篇: 使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。