vue video和vue-video-player实现视频铺满教程

让我来介绍如何使用Vue Video和Vue-Video-Player在网站中实现视频全屏播放。

第一步是将Vue Video和Vue-Video-Player添加到项目中。您可以使用npm或yarn来完成此操作。在终端中输入以下命令：

npm install vue-video@5.0.2 --save
npm install vue-video-player@5.0.3 --save

在组件中引入两个库并进行简单的配置。示例代码如下：

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

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: { //播放器配置
        autoplay: false,
        controls: true,
        //......
      }
    }
  }
}
</script>

第二步是添加视频源和相关的控制函数。示例代码如下：

<template>
  <div>
    <video-player ref="player" :options="playerOptions">
      <source src="./src/assets/videos/sample-video.mp4" type="video/mp4"></source>
    </video-player>
    <button @click="playFullScreen">Full Screen</button>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true
      }
    }
  },
  methods: {
    playFullScreen() {
      if (this.$refs.player.isFullScreen) {
        this.$refs.player.exitFullScreen()
      } else {
        this.$refs.player.requestFullScreen()
      }
    }
  }
}
</script>

这个示例中，我们通过playFullScreen函数实现了全屏播放视频的功能，其中isFullScreen和requestFullScreen、exitFullScreen是Vue Video中预定义的方法。

在Vue Video和Vue-Video-Player的帮助下，我们轻松实现了网站的全屏视频播放功能。

另外一个示例是将视频源和播放器样式信息放在外部文件中的示例。示例代码如下：

<template>
  <div>
    <video-player ref="player" :options="playerOptions">
      <source :src="videoUrl" :type="videoType"></source>
    </video-player>
    <button @click="playFullScreen">Full Screen</button>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    VideoPlayer
  },
  props: {
    videoUrl: String,
    videoType: String
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true
      }
    }
  },
  methods: {
    playFullScreen() {
      if (this.$refs.player.isFullScreen) {
        this.$refs.player.exitFullScreen()
      } else {
        this.$refs.player.requestFullScreen()
      }
    }
  }
}
</script>

<style src="./assets/css/video-player.css"></style>

在这个示例中，我们通过props将视频源和类型作为参数传递，允许我们通过实现一个通用的组件来方便地在网站中使用。

希望这些示例能够帮助您使用Vue Video和Vue-Video-Player实现网站的视频全屏播放功能。