vue-video-player通过自定义按钮组件实现全屏切换效果【推荐】

// 需要在 events 中指定全屏切换事件，不然无法监听
data () {
 return {
  videoDialogVisible: false, // 控制弹出层
  events: ['fullscreenchange']
 }
},
methods: {
 ...
 onPlayerFullScreenchange (player) {
  player.exitFullscreen() //强制退出全屏，恢复正常大小
  this.videoDialogVisible = true
 }
 ...
}

import * as videojs from 'video.js'

export default {
 ...
 methods: {
  ...
  createMyButton () {
   let Button = videojs.getComponent('Button')
   let myButton = videojs.extend(Button, {
    constructor: function (player, options) {
     Button.apply(this, arguments)
     this.addClass('fullscreen-enter')
    },
    handleClick: () => {
     // 绑定点击事件
    },
    buildCSSClass: function () {
     return 'vjs-icon-custombutton vjs-control vjs-button'
    }
   })
   
   //注册
   videojs.registerComponent('myButton', myButton)
   
   this.$nextTick(() => {
    // 添加到controlBar中
    this.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton')
   })
  }
  ...
 }
}

// 在 style 中指定自定义按钮样式

onCustombuttonClick () {
 let _time = this.$refs.videoPlayer1.player.currentTime() //已播放时长
 this.$refs.videoPlayer2.player.currentTime(_time)
 this.$refs.videoPlayer2.player.play()
}