微信小程序(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
 }
 }
}