[分享]本地视频上传vue

许多网站需要用户上传本地视频，而Vue可以很方便地实现。在本文中，我们将学习如何使用Vue实现本地视频上传。首先，我们需要在Vue中安装vuevideoplayer插件，这个插件提供了视频播放器的功能...

许多网站需要用户上传本地视频，而Vue可以很方便地实现。在本文中，我们将学习如何使用Vue实现本地视频上传。

首先，我们需要在Vue中安装vue-video-player插件，这个插件提供了视频播放器的功能。

npm install vue-video-player 

我们可以将Vue Video Player导入到组件中以便使用：

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    VueVideoPlayer
  },
} 

接下来，我们需要在HTML中添加一个文件输入框，以便用户上传视频：

<template>
  <div>
    <input type="file" @change="uploadVideo">
    <vue-video-player ref="player" @ended="$emit('video-ended')"></vue-video-player>
  </div>
</template> 

我们可以使用uploadVideo方法来处理上传的视频，该方法将接收到的视频文件传递给Vue Video Player来播放：

<script>
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    VueVideoPlayer
  },
  methods: {
    uploadVideo(event) {
      const file = event.target.files[0]
      const player = this.$refs.player.getPlayer()
      player.src({type: file.type, src: URL.createObjectURL(file)})
      player.load()
      player.play()
    },
  }
}
</script> 

在uploadVideo方法中，我们使用Vue Video Player的getPlayer方法获取播放器实例，并使用src方法设置播放源并播放视频。

我们还可以添加一些样式，以便样式化视频播放器：

<style lang="scss">
@import "~video.js/dist/video-js.css";
@import "~vue-video-player/src/custom-theme.scss";

.video-js {
  width: 100%;
  height: 100%;
  .vjs-big-play-button {
    margin-top: -2.5em;
    margin-left: -1.25em;
  }
}
</style> 

现在，我们已经成功地使用Vue实现了本地视频上传功能。