本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来H5视频中背景音乐如何自动播放,H5视频中背景音乐自动播放的注意事项有哪些,下面就是实战案例,一起来看一下。音乐的自动播放属性,这里也介绍一下:
1 2 3 4 5 | <audio controls= "controls" autoplay= "autoplay" >
<source src= "song.ogg" type= "audio/ogg" />
<source src= "song.mp3" type= "audio/mpeg" />
Your browser does not support the audio element.
</audio>
|
autoplay 属性规定一旦音频就绪马上开始播放。
如果设置了该属性,音频将自动播放。
但是在实际运用中,经常会遇到不能自动播放的现象,主要是因为有些浏览器或者手机会阻止或不支持autoplay这个属性,在这里我介绍一下我采用的方法。
首先:在html中代码如下
1 2 3 4 5 6 | <audio id= "music1" controls= "controls" autoplay= "autoplay" preload id= "music1" hidden>
<source src= "music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id= "btn" class = "active" src= "img/music.png" alt= "" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->
|
在js文件中采用如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var audio = document.getElementById( 'music1' );
$( "#btn" ).bind( "touchstart" , function bf() {
if (audio !== null) {
if (audio.paused) {
audio.play();
$( "#btn" ).addClass( "active" )
} else {
audio.pause();
$( "#btn" ).removeClass( "active" )
}
}
})
|
写到了这里大部分安卓机就基本可以实现自动播放了,但是苹果手机在这个时候还是不行的
这里我采用了一个在加载页中加入一个按钮,当加载完成的时候,点击按钮,引导用户完成背景音乐的自动播放,代码如下:
1 2 3 | $( "html" ).one( 'touchstart' , function (){
audio.play();
})
|
到了这里就实现了背景音乐的自动播放,这个办法适用于有加载页,并且需要点击进入h5的项目......
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
H5在Canvas中实现自定义路径动画
在H5页面中怎样调用APP
使用canvas实现视频里的弹幕效果
以上就是H5视频中背景音乐如何自动播放的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5的表单中关于所有type类型的详细介绍
如何通过HTML5实现摇一摇的功能
移动端HTML5音频与视频遇到的问题及解决方案
使用HTML5 canvas封装一个echarts实现不了的饼图
用h5做出微信的支付过程的实现步骤
HTML5需遵循怎样的6个设计原则?
浅谈HTML5新增及移除的元素
HTML5与html4的区别是什么
利用HTML5以及canvas实现支持签名插件的方法
企业开发中使用h5有哪些注意事项
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5视频中背景音乐如何自动播放