vue使用vue-video-player插件播放视频的步骤讲解

好的！下面我将为你详细讲解如何使用vue-video-player插件在Vue项目中播放视频的步骤。

1. 安装vue-video-player插件

在终端输入以下命令安装vue-video-player插件：

npm install vue-video-player --save

2. 引入vue-video-player组件

在Vue项目的main.js文件中引入vue-video-player组件：

import Vue from 'vue'
import App from './App.vue'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

Vue.use(VideoPlayer);

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在组件中使用vue-video-player

在需要播放视频的Vue组件中引入vue-video-player组件并使用:

<template>
  <div class="container">
    <video-player ref="videoPlayer" 
                  :options="playerOptions" 
                  @ready="onPlayerReady" 
                  @ended="onPlayerEnded">
      <source :src="url" type="video/mp4"></source>
    </video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'VideoPlay',
  components: {
    'video-player': videoPlayer
  },
  data() {
    return {
      url: 'https://example.com/test.mp4', // 测试视频链接
      playerOptions: {
        autoplay: true, // 自动播放
        muted: true, // 静音
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        controls: true, // 显示控制条
        sources: [{
          src: 'https://example.com/test.mp4',
          type: 'video/mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player ready: ', player)
    },
    onPlayerEnded() {
      console.log('Player ended')
    }
  }
}
</script>

上述代码中使用video-player组件来播放视频，我们传递给组件options选项进行控制。此处我们设置了自动播放、静音、播放速度、显示控制条等选项。同时，我们还传递了一个视频链接，以便播放。

4. 示例说明

示例1：播放本地视频文件

如果你想要在Vue项目中播放本地视频文件，可以在上面的代码中把链接url指向本地视频文件地址即可。例如：

<template>
  <div class="container">
    <video-player ref="videoPlayer"
                  :options="playerOptions" 
                  @ready="onPlayerReady" 
                  @ended="onPlayerEnded">
      <source :src="url" type="video/mp4"></source>
    </video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'VideoPlay',
  components: {
    'video-player': videoPlayer,
  },
  data() {
    return {
      url: require('@/assets/test.mp4'), // 指向本地文件地址
      playerOptions: {
        autoplay: true,
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        controls: true,
        sources: [{
          src: require('@/assets/test.mp4'),
          type: 'video/mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player ready: ', player)
    },
    onPlayerEnded() {
      console.log('Player ended')
    }
  }
}
</script>

示例2：自定义控制条样式

你可以通过自定义CSS来重写vue-video-player的默认控制条样式。例如，如果你想要在控制条上添加额外的按钮，可以在组件中添加一个具有特殊CSS样式的按钮即可。示例如下：

<template>
  <div class="container">
    <video-player ref="videoPlayer"
                  :options="playerOptions" 
                  @ready="onPlayerReady" 
                  @ended="onPlayerEnded">
        <source :src="url" type="video/mp4"></source>
    </video-player>
    <div class="custom-controls">
      <button class="custom-button" @click="customButtonClick()">自定义按钮</button>
    </div>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'VideoPlay',
  components: {
    'video-player': videoPlayer,
  },
  data() {
    return {
      url: 'https://example.com/test.mp4',
      playerOptions: {
        autoplay: true,
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        controls: true,
        sources: [{
          src: 'https://example.com/test.mp4',
          type: 'video/mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player ready: ', player)
    },
    onPlayerEnded() {
      console.log('Player ended')
    },
    customButtonClick() {
      console.log('自定义按钮被点击了')
    }
  }
}
</script>

<style scoped>
.custom-controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  text-align: center;
}

.custom-button {
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}
</style>

上述代码中我们通过自定义CSS样式，添加了一个自定义按钮，它将会显示在视频控制条下方，点击时会触发一个自定义方法。

最后，别忘了在Vue项目中引入video.js和videojs-contrib-hls（如果你需要播放Hls视频文件）。以下是Vue项目中安装这两个依赖的命令：

npm install video.js --save
npm install videojs-contrib-hls --save

到这里，我已经为你讲解了如何在Vue项目中使用vue-video-player播放视频的完整攻略，包括安装插件、引入组件、使用vue-video-player以及自定义控制条样式等内容。希望对你有所帮助！