zoukankan      html  css  js  c++  java
  • 解决audio 在部分移动端浏览器不能自动播放(目前包括ios、微博)

    问题描述:项目需要在页面加载完成后自动播放音乐,但在ios中却无法自动播放,需要用户主动触发

    解决办法:

    $('html').one('touchstart',function(){
    document.getElementById('audio2').play();
    });

    (只触发一次)

    解决在微信浏览器中ios audio无法自动播放

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <title>IOS微信</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript">
    //原来是在微信易信执行Ready之前,先注册事件,所以放在所有请求的最前面
    document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay('Jaudio');//给个全局函数
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        audioAutoPlay('Jaudio');//给个全局函数
    }, false);
    </script>
    <!-- 加载css放这里 -->
    </head>
    <body>
      
    <audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop">
    </audio>
      
    <script>
    function audioAutoPlay(id){//全局控制播放函数
        var audio = document.getElementById(id),
            play = function(){
                audio.play();
                document.removeEventListener("touchstart",play, false);
            };
        audio.play();
        document.addEventListener("touchstart",play, false);
    }
     
    var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase());
    if(!isAppInside){//给非微信易信浏览器
      audioAutoPlay(Jaudio);
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    HDU 5650 异或
    HDU 5646
    HDU 5645
    P2075 [NOIP2012T5]借教室 区间更新+二分查找
    HDU 5641
    读写分离
    linux执行cmd之一
    html2image
    挂载引起的权限问题
    如何防止sql注入
  • 原文地址:https://www.cnblogs.com/lvshuya/p/6610523.html
Copyright © 2011-2022 走看看