微信小程序(mpvue)—解决视频播放bug的一种方式

// 第一页

<div @click="play(video.src, video.width, video.height)"></div>

methods: {

　　play (src, width, height) {

　　　　this.$router.push({path: `/pages/playVideo?src=${src}&width=${width}&height=${height}`})

  }

}

// 第二页

<div class="video-box">
  <video class="video"
  　　:style="{width: width, height: height}"
      id="video"
      :src="src"
      show-play-btn
      controls
      autoplay="true"
      objectFit="cover"
      :show-fullscreen-btn="fullscreenShow"
      custom-cache="false"
  ></video>
</div>

export default {
  data () {
    return {
      width: '100%',
      height: '100%',
      src: '',
      fullscreenShow: false,
      videoObj: wx.createVideoContext('video')

    }
  },
  onLoad () {
    this.src = this.$route.query.src

    const width = this.$route.query.width
    const height = this.$route.query.height
    if (width > height) {
      const radio = width / wx.getSystemInfoSync().windowWidth
      this.width = width / radio + 'px'
      this.height = height / radio + 'px'
      this.fullscreenShow = true
    } else {
      this.fullscreenShow = false
    }
  }
}