vue-video-player 如何实现全屏

模式？

Vue-video-player 可以通过调用该组件的 `$refs` 对象上的 `webkitRequestFullScreen` 方法实现全屏模式。示例代码如下：

this.$refs.videoPlayer.$refs.video.webkitRequestFullScreen();

同时，vue-video-player 也提供了内置的 `fullscreen` 插件，支持通过点击全屏按钮实现全屏。只需要在组件中引入该插件即可：

import { videoPlayer } from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';

import fullscreen from 'videojs-fullscreen';

Vue.use(videoPlayer, {
  options: {
    plugin: {
      fullscreen: {
        events: {
          // 绑定 Fullscreen API 事件
          click: function () {
            var player = videojs('my-player');
            if (player.hasClass('vjs-fullscreen')) {
              player.removeClass('vjs-fullscreen');
              player.width(640).height(360);
            } else {
              player.addClass('vjs-fullscreen');
              player.width(screen.availWidth).height(screen.availHeight);
            }
          },
        }
      }
    }
  }
});