w3ctech

iOS 微信 音频 视频自动播放

iPhone手机音频、视频无法自动播放?

在做爆米兔的时候,遇到上面的问题,各种尝试都没有结果。最后发现:

通过下面的方式可以解决,在iPhone手机微信中正常自动播放。

必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~

可以用iPhone手机在微信中打开这里,查看效果~

测试了90%的iPhone机型,大部分直接调用audio的play方法就可以自动播放了,但是一些奇葩iPhone机不可以

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
     document.getElementById('car_audio').play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById('car_audio').play();
        document.getElementById('video').play();
    }, false);
</script>

@Nokey 提问:最近又发现一个问题,Android不能同时播放两个音频? @李猜猜回答:因为ready只会触发一次,所以不能播放多个音频。但是如果需要播放多个音频,其实只要调用一下eixinJSBridge进行包裹即可。 示例代码如下

function playAudio() {
    if (setting.autoplay) {
        if (window.WeixinJSBridge) {
            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                audio.play();
            }, false);
        } else {
            document.addEventListener("WeixinJSBridgeReady", function () {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    audio.play();
                });
            }, false);
        }
        audio.play();
    } else {
        audio.pause();
    }
    return false;
}
w3ctech微信

扫码关注w3ctech微信公众号

共收到12条回复

  • 这么容易? “ios无法自动播放音视频,除非是用户触发的动作”难到这个命题不对了?

    回复此楼
  • @吕大豹 是微信做了处理了~

    回复此楼
  • @黑MAO 明白~再找找移动端浏览器中的解决方法吧~~

    回复此楼
  • @吕大豹 看到了一个使用webkitAudioContext,使用arraybuffer解决的,这个我还没有深入了解~

    回复此楼
  • 赞,原来是这样~

    PS:我试了下 webkitAudioContext + arraybuffer,貌似没成功,在电脑上可以自动播放,iPhone 上还是不行。 http://qgy18.imququ.com/file/mp3.html

    回复此楼
  • @ququ 万能的屈屈已经试过了呀~系统层面的确实没那么容易搞定~只能持续跟进了

    回复此楼
  • iPhone总共就那么几个机型好么..不能播放是因为你打开的姿势并不正确.. 其实你只需要把滚动条稍微滚动那么点点,就可以自动播放了..

    回复此楼
  • shouldn't autoplay the video or audio after 'canplay' event was triggered?

    回复此楼
  • @Nokey 应该是苹果不允许这么做。详细说明

    回复此楼
  • @黑MAO Because when user on a cellular network, data is money. If user want to play audio, he must do some interactive behavior, so you can put 'play()' into 'touchstart' event's 'callback' function. I'm not sure when 'canplay' event will be triggered on Safari...need test it

    回复此楼
  • @黑MAO 最近又发现一个问题,Android不能同时播放两个音频。。。

    回复此楼
  • @Nokey 因为ready只会触发一次,所以不能播放多个音频。但是如果需要播放多个音频,其实只要调用一下eixinJSBridge进行包裹即可。 示例代码如下

    function playAudio() {
        if (setting.autoplay) {
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    audio.play();
                }, false);
            } else {
                document.addEventListener("WeixinJSBridgeReady", function () {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        audio.play();
                    });
                }, false);
            }
            audio.play();
        } else {
            audio.pause();
        }
        return false;
    }
    
    回复此楼