audio元素和video元素在ios和andriod中无法自动…

2018-06-24 01:33:40来源：未知阅读 ()

原因： 因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；

    /音频，写法一

 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>


    
    //音频，写法二

<audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        //优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>


    
    //JS绑定自动播放（操作window时，播放音乐）

  $(window).one('touchstart', function(){
        music.play();
    })

    //微信下兼容处理

 document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);


    
    小结：
    1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
    2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
    3.注意不要遗漏微信的兼容处理需要引用微信JS；

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有