H5视频中背景音乐如何自动播放
导读:收集整理的这篇文章主要介绍了H5视频中背景音乐如何自动播放,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来H5视频中背景音乐如何自动播放,H5视频中背景音乐自动播放的注意事项有哪些,下面就是实战案例,一起来看一下。音乐的自动...
收集整理的这篇文章主要介绍了H5视频中背景音乐如何自动播放,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来H5视频中背景音乐如何自动播放,H5视频中背景音乐自动播放的注意事项有哪些,下面就是实战案例,一起来看一下。音乐的自动播放属性,这里也介绍一下:
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中代码如下
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文件中采用如下代码
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在Canvas中实现自定义路径动画
在H5页面中怎样调用APP
使用canvas实现视频里的弹幕效果
以上就是H5视频中背景音乐如何自动播放的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: H5视频中背景音乐如何自动播放
本文地址: https://pptw.com/jishu/583975.html