H5 video autoplay (autoplay) does not work solution

1. Introduction

• There is a h5that needs to be added to the player, and it is found that 微信浏览器中it cannot be played automatically in , 移动端普通浏览器中nor can it be played automatically in .

  • iosIn the browser (WeChat or other browsers), every time you refresh and enter the webpage, you need to manually click to play for the first time, and it will play automatically next time.

  • 安卓In the WeChat browser, it will not enter autoplay anyway, but it will enter autoplay in other browsers.

• iosThe platform can be solved through the official WeChat jweixinplug-in . I read some articles before saying that this method cannot solve the automatic playback of Android phones ( 别的文章上写的：安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。)

• But after testing, iosit was solved, 安卓and it was automatically played in WeChat, and both ends were also played normally and automatically on other mobile browsers, so I don’t know if the WeChat plug-in has optimized this detail.

Two, the solution

• vuesolve

  1. Install the plug-in

  $ npm i jweixin-module
  

  2. main.jsMedium configuration

  import wxjssdk from 'jweixin-module'
  Vue.prototype.$wx = wxjssdk
  

  3. Use and resolve

  mounted () {
        
        
      // 配置
      this.$wx.config({
        
        
          debug: false,
          appId: 'wx123456789',
          timestamp: '',
          nonceStr: '',
          signature: '',
          jsApiList: []
      })
      // 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数
      // 主要目的就是为了走 ready 函数
      this.$wx.ready(() => {
        
        
         // 取得播放器对象，调用播放事件
         this.play()
      })
  }
  

• CDNsolve

  1. Import. Attachment: Wechat jweixin official document address .

  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  

  2. use

  // 配置
  wx.config({
        
        
      debug: false,
      appId: 'wx123456789',
      timestamp: '',
      nonceStr: '',
      signature: '',
      jsApiList: []
  })
  // 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数
  // 主要目的就是为了走 ready 函数
  wx.ready(() => {
        
        
     // 取得播放器对象，调用播放事件
     this.play()
  })