vue video全屏显示广告

根据提供的引用内容，可以使用vue-video-player插件实现视频全屏显示广告。具体步骤如下：

.在Vue组件中引入vue-video-player插件，并在data中定义视频播放器的options选项，其中包括广告视频的url和广告结束后跳转的url等信息。

2.在Vue组件中定义一个方法，用于在视频播放结束后显示广告。在该方法中，使用video-player插件提供的API，将视频暂停并切换到全屏模式，然后显示广告视频。

3.在广告视频播放结束后，使用video-player插件提供的API，将视频切换回正常模式，并跳转到指定的url。

下面是一个示例代码：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        sources: [{
          src: 'http://example.com/video.mp4',
          type: 'video/mp4'
        }],
        ad: {
          src: 'http://example.com/ad.mp4',
          link: 'http://example.com'
        }
      }
    }
  },
  mounted() {
    this.$refs.videoPlayer.$on('ended', this.showAd)
  },
  methods: {
    showAd() {
      const player = this.$refs.videoPlayer.player
      player.pause()
      player.requestFullscreen()
      player.src({
        src: this.playerOptions.ad.src,
        type: 'video/mp4'
      })
      player.play()
      player.one('ended', () => {
        player.exitFullscreen()
        window.location.href = this.playerOptions.ad.link
      })
    }
  }
}
</script>