Vue-视频播放插件vue-video-player的配置及简单使用

vue视频播放插件vue-video-player

1. 安装

# 安装命令
npm install vue-video-player --save

2. 引入

​ 可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）

1. 全局引用 在main.js里面导入并引用

import VideoPlayer from 'vue-video-player'

// 引入方式一
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'

// 引入方式二
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

2. 组件内引用

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  }
}

3. 使用

1. html部分 (在页面中引用)

<template>
    <div class='demo'>
        <video-player class="video-player vjs-custom-skin" 
                      ref="videoPlayer" 
                      :playsinline="true" 
                      :options="playerOptions">
        </video-player>
    </div>
</template>

2. js部分 (配置数据)

export default {
   
   
    data() {
   
   
        return {
   
   
            playerOptions: {
   
   
                playbackRates: [0.5, 1.0, 1.5, 2.0