vue-video-player 如何实现全屏移动端

vue-video-player 在移动端实现全屏功能可以通过以下步骤实现：

1. 在全屏按钮的点击事件中加入以下代码：

fullScreen() {
  if (this.$refs.video.webkitRequestFullScreen) {
    this.$refs.video.webkitRequestFullScreen()
  } else if (this.$refs.video.mozRequestFullScreen) {
    this.$refs.video.mozRequestFullScreen()
  } else if (this.$refs.video.requestFullscreen) {
    this.$refs.video.requestFullscreen()
  }
}

2. 在退出全屏的方法中加入以下代码：

exitFullscreen() {
  if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.exitFullscreen) {
    document.exitFullscreen()
  }
}

3. 在组件中加入以下代码：

mounted () {
  this.$nextTick(() => {
    const video = this.$refs.video
    video.addEventListener('webkitfullscreenchange', this.fullScreenChange)
    video.addEventListener('mozfullscreenchange', this.fullScreenChange)
    video.addEventListener('fullscreenchange', this.fullScreenChange)
  })
},
methods: {
  fullScreenChange () {
    this.isFullScreen = !this.isFullScreen
  }
}

这样，在移动端就可以通过点击全屏按钮来进入全屏模式，再次点击则可以退出全屏模式。