前言
最近在做一个移动端项目,需要为H5配一段背景音乐且要自动播放,按照以往的方法将自动播放代码加入进去就可以了,可以却发生了点小插曲(捂脸),下面话不多说了,来一起看看详细的介绍吧。
移动端音频播放代码
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.pause { position : absolute ; z-index : 10000 ; bottom : 10px ; right : 10px ;}
.pause a { width : 30px ; height : 30px ; background : url (http://mat 1 .gtimg.com/zj/maxbao/reai/imgs/units-icons.png) 0 0 no-repeat ; display : block ; background- size : 90px auto ;}
.pause a.on { -webkit-animation:reverseRotataZ 1.2 s linear infinite}
.pause a.off { }
.pause span{ color : #fff ; font-size : 16px ; position : absolute ; left : -40px ; top : 5px ; text-shadow : 1px 1px 1px #000 ; letter-spacing : 2px ; -webkit-transition: all . 2 s linear; opacity: 0 ; -webkit-transform:translateX( -20px ) }
.pause span.z- show { opacity: 1 ; -webkit-transform:translateX( 0px )}
.coffee-steam-box { -webkit-transform:translate( -40px , -40px )}
@-webkit-keyframes reverseRotataZ {
0% {
-webkit-transform:rotateZ( 0 deg)
}
100% {
-webkit-transform:rotateZ( -360 deg)
}
}
.audio{ position : absolute ; z-index : 10 ; visibility : hidden ; opacity: 0 ; left : 0px ; top : 0px ; width : 100px ; height : 30px ;}
|
html
1
2
3
4
5
6
7
8
|
< div class = "pause" >
< a class = "on" href = "#" rel = "external nofollow" >
</ a >
< span >开启</ span >
</ div >
< div class = "audio" >
< audio src = "http://mat1.gtimg.com/ln/images/2016zt/12Dec/dlsdbm/music.mp3" controls = "controls" preload = "auto" autoplay = "autoplay" id = "audio" loop></ audio >
</ div >
|
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
//播放器
( function ($) {
$(document).ready( function () {
var musicControl = function (obj){
var classname = $.trim(obj.attr( 'class' ));
//alert(classname);
if (classname == 'on' )
{
document.getElementById( 'audio' ).pause();
obj.removeClass( 'on' ).addClass( 'off' );
obj.siblings( 'span' ).text( '关闭' );
$( '.pause span' ).addClass( 'z-show' );
$( '.music-icon' ).removeClass( 'active' );
setTimeout( function (){
$( '.pause span' ).removeClass( 'z-show' );
},500);
} else if (classname == 'off' )
{
document.getElementById( 'audio' ).play();
obj.removeClass( 'off' ).addClass( 'on' );
obj.siblings( 'span' ).text( '开启' );
$( '.music-icon' ).addClass( 'active' );
$( '.pause span' ).addClass( 'z-show' );
setTimeout( function (){
$( '.pause span' ).removeClass( 'z-show' );
},500);
};
return false ;
}
$( '.pause a' ).click( function ()
{
musicControl($( this ));
});
var audio = document.getElementById( 'audio' );
audio.play();
$(document).one( "touchstart" ,
function () {
audio.play()
})
});
})(jQuery);
|
问题解决
加进去后用微信(iOS系统)浏览页面发现居然没有自动播放,点击暂停后再次点击播放正常,这就说明播放功能没有问题,将页面用iOS自带浏览器Safari打开后也不能自动播放,往年都是用这段代码,屡试不爽难道突然就不好使了?随即用android手机打开页面,居然可以自动播放,那就证明代码本身是没有问题的,随后查了相关文献,是因为iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动play一下audio应该就可以解决问题了,代码如下:
1
|
document.getElementById( 'idName' ).play();
|
这个时候Safari可以自动播放了但是发现微信里面居然还是不行,难道是微信做了什么处理?将代码修改如下:
1
2
3
4
5
6
7
8
9
10
|
< script src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></ script >
< script >
//一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
document.getElementById('idName').play();
//微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('idName').play();
document.getElementById('video').play(); //视频自动播放
}, false);
</ script >
|
至此已经完美解决了自动播放的问题,其实对于不允许音频视频自动播放的问题来说不一定就是坏事,因为你想毕竟大家流量那么贵,一个音频视频动辄就几MB甚至十几MB、几十MB,自动播放流量瞬间就出去了,哭都来不及,所以如果不是必要情况还是不要自动播放的好,听不听看不看交给用户来选择。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。
原文链接:http://www.webexp.cn/dlsd2016.html