ios 微信浏览器视频自动播放问题解决方法【亲测有效】

1,798 阅读1分钟

播放自动视频的两个前提条件

  • 设置自动播放 autoplay
  • 设置静音 muted

有些限制必须有点击操作,这个看需求,如果实现不了进入页面自动播放可以考虑价格播放按钮,引导用户点击。

因为我的视频不需要显示控件,不需要全屏播放 这些就统统去掉了。

    <video
        src=""
        id="videoRef"
        autoplay
        muted
        x5-video-player-type="h5"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline="true"
        x5-video-player-fullscreen="true"
      ></video>
#videoRef video::-webkit-media-controls {
  display: none !important;
}

问题描述:由于浏览器限制,视频不能够自动播放,需要用户手势触发才可以。

解决方法:通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制。

上面链接中的操作比较繁琐,在此给出简化版本(亲测可用):

function doPlay(){
  WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
    var $video1 = $("#video1")
    var $video2 = $("#video2")
    $video1[0].play()
    $video2[0].play()
  })
}
      
if (window.WeixinJSBridge) {
  doPlay()
} else {
  document.addEventListener("WeixinJSBridgeReady", function(){
    doPlay()
  }, false);
}

需要注意的是,监听WeixinJSBridgeReady事件后,回调函数里需要调用一下invoke,在invoke中操作视频才可以生效。

另外,页面不需要引入jweixin-1.0.0.js,微信浏览器会自带api。