美文网首页
解决ios微信浏览器中audio和video音乐视频无法自动播放

解决ios微信浏览器中audio和video音乐视频无法自动播放

作者: 王乐城愚人云端 | 来源:发表于2017-07-21 11:47 被阅读0次

    产生问题的原因

    参考网址:点击
    对于自动播放的局限性,没有变通方案。正如前面所提及的,音频流只能从用户触摸事件加载。当针对移动版 Safari 进行开发时,重要的一点是要在必要时调整您的工作流,以适应这个局限性。(以我的经验来看,我知道如果在一开始没有将这些考虑在内,那么将来会发生很多重构。)
    在 iOS 4.2.1 之前,可以从一个同步 Ajax 调用的回调来加载音频文件,如下所示。

    // run on page load
    var audio = document.getElementById('audio');
      jQuery.ajax({
      url: 'ajax.js',
      async: false,
      success: function() {
      audio.play(); // audio will play in iOS before 4.2.1
    }
    });
    

    上述方法存在一个问题:因它是一个同步 Ajax 调用,所以浏览器是锁定的,直到调用结束为止。在移动版 Safari 中,锁定并不只是意味着页面锁定,整个应用程序都会锁定。如果有错误发生,并且移动版 Safari 陷入锁定状态(可能性不是很大),那么退出浏览器的惟一方式是单击 home 按钮并强制关闭应用程序。
    因此,Apple 在 iOS 4.2.1 中修复了这种变通方式,所以这种变通方法在 iOS 4.2.1 和后续版本中是不起作用的。

    无法自动播放解决方法

    调用微信jssdk的功能来实现自动播放

    function audioAutoPlay(id){  
        var audio = document.getElementById(id);  
        audio.play();  
        document.addEventListener("WeixinJSBridgeReady", function () {  
                audio.play();  
        }, false);  
        document.addEventListener('YixinJSBridgeReady', function() {  
            audio.play();  
        }, false);  
    }  
    audioAutoPlay('AudioId');  
    

    无法通过ajax异步控制播放的解决方法

    取消异步,改成ajax同步async:false,

    var audio = document.getElementById('audio');
    jQuery.ajax({
      url: 'ajax.js',
      async: false,
      success: function() {
      audio.play(); // 这种方法在IOS4.2.1之前能正常播放
    }
    });
    

    使用setTimeout来定时播放,延时时间1毫秒

    var audio = document.getElementById('audio');
    jQuery.ajax({
      url: 'ajax.js',
      async: false,
      success: function() {
      setTimeout(function(){
      audio.play();
      },1);// 这种方法适应所有版本的IOS
    }
    });
    

    相关文章

      网友评论

          本文标题:解决ios微信浏览器中audio和video音乐视频无法自动播放

          本文链接:https://www.haomeiwen.com/subject/jdoskxtx.html