html5实现背景音乐的自动播放

王林
发布: 2020-12-02 14:35:27
转载
15687 人浏览过

html5实现背景音乐的自动播放

自动播放属性:

(推荐教程:html5视频教程

登录后复制

autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。

但是在实际运用中,经常会遇到不能自动播放的现象,主要是因为有些浏览器或者手机会阻止或不支持autoplay这个属性,在这里我介绍一下我采用的方法。

首先:在html中代码如下

   
登录后复制

在js文件中采用如下代码:

var audio = document.getElementById('music1'); $("#btn").bind("touchstart", function bf() { if(audio !== null) { //检测播放是否已暂停.audio.paused 在播放器播放时返回false. //alert(audio.paused); if(audio.paused) { audio.play(); //audio.play();// 这个就是播放 $("#btn").addClass("active") } else { audio.pause(); // 这个就是暂停 $("#btn").removeClass("active") } } })
登录后复制

写到了这里大部分安卓机就基本可以实现自动播放了,但是苹果手机在这个时候还是不行的

这里我采用了一个在加载页中加入一个按钮,当加载完成的时候,点击按钮,引导用户完成背景音乐的自动播放,代码如下:

$("html").one('touchstart',function(){ audio.play(); })
登录后复制

到了这里就实现了背景音乐的自动播放,这个办法适用于有加载页,并且需要点击进入h5的项目。

相关推荐:h5

以上是html5实现背景音乐的自动播放的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!