The problem that the video cannot be played automatically in the WeChat browser using the video plug-in in Vue

The problem that the video cannot be played automatically in the WeChat browser using the video plug-in in vue (solved)

When writing h5 with vue, I encountered a requirement. The page background was set to video, so I used the video.js plug-in, and finally got stuck on WeChat and could not automatically play the video. The answers I searched on the Internet were all the same copy and paste. A little use, after five or six hours, finally solved the problem, in fact, the implementation method is not as complicated as the Internet, no more nonsense, just upload the code!
Note: some attributes have not had time to test whether they are needed, you can delete them yourself according to the test results! ! !

Test machine: Android Huawei p30, ios has not been tested yet, but it is better to set ios according to the Internet, and the following code is also set to be compatible

 //下载好插件不用再去搞什么子路由，直接在需要插入视频的地方插入video标签
  <video
         webkit-playsinline="true"
          x-webkit-airplay="true" 
          playsinline="true" 
         x5-video-player-type="h5"
         x5-video-player-fullscreen="true" 
         width="100%" 
         height="100%"
          id="example_video" 
          class="video-js " 
          preload='auto'
          autoplay='true'
          loop
          muted
          poster="../assets/video/01.jpg"
          >
          //src就是你的视频地址，我这里是需要每次进入页面随机切换背景视频，所以用了计算属性
	        <source :src="dd.src" type="video/mp4">
    </video>
    

js

  mounted(){
  //视频自动播放
  this.$nextTick(()=>{
    var video = document.getElementById("example_video");
      video.play();
  }),
    destroyed(){
  // this.videoPlayer.dispose(); //销毁video
  //或者重置video
   this.$nextTick(()=>{
    var video = document.getElementById("example_video");
      video.reset();
})
}

Yes, you read that right, it’s that simple, and it’s not as complicated as getting something online, because I’ve tried everything, and finally found that the problem can be solved directly in created