vue-video-player vue2的版本完整教程

Vue Video Player是一个基于Vue.js的视频播放器插件，它支持HTML5视频、Flash视频和YouTube视频播放。下面是Vue Video Player的完整教程。

1. 安装

使用npm安装：

npm install vue-video-player --save

2. 加载

在Vue中加载Vue Video Player：

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

Vue.use(VueVideoPlayer)

3. 使用

在Vue组件中使用Vue Video Player：

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

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          type: 'video/mp4',
          src: 'https://example.com/video.mp4'
        }]
      }
    }
  },
  mounted() {
    this.$refs.player.play()
  }
}
</script>

4. 配置

Vue Video Player支持许多选项，您可以在playerOptions中设置它们：

playerOptions: {
  autoplay: false,
  controls: true,
  sources: [{
    type: 'video/mp4',
    src: 'https://example.com/video.mp4'
  }],
  techOrder: ['html5', 'flash'],
  poster: 'https://example.com/poster.jpg',
  language: 'en',
  playbackRates: [0.5, 1, 1.5, 2],
  fluid: true,
  aspectRatio: '16:9',
  muted: false,
  loop: false,
  preload: 'auto',
  notSupportedMessage: '此视频格式不受支持',
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true,
    volumePanel: {
      inline: false
    }
  }
}

5. 事件

Vue Video Player还提供了一些事件，您可以在Vue组件中监听它们：

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

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          type: 'video/mp4',
          src: 'https://example.com/video.mp4'
        }]
      }
    }
  },
  mounted() {
    this.$refs.player.play()
  },
  methods: {
    onPlay() {
      console.log('播放器已开始播放')
    }
  }
}
</script>

常用事件包括：

- play：播放器开始播放
- pause：播放器暂停
- ended：播放器播放完成
- error：播放器出错
- timeupdate：播放器时间更新

6. 自定义皮肤

Vue Video Player使用video.js作为底层技术，您可以使用video.js的皮肤或自定义皮肤。

使用video.js的皮肤：

import 'video.js/dist/video-js.css'
import 'video.js/dist/skin-flat.css'

自定义皮肤：

.video-js {
  /* 控制栏 */
  .vjs-control-bar {
    /* 背景颜色 */
    background-color: #333;

    /* 文字颜色 */
    color: #fff;

    /* 进度条 */
    .vjs-progress-control {
      .vjs-progress-holder {
        .vjs-play-progress,
        .vjs-load-progress {
          /* 进度条颜色 */
          background-color: #fff;
        }
      }
    }

    /* 播放暂停按钮 */
    .vjs-play-control,
    .vjs-pause-control {
      &:before {
        /* 图标颜色 */
        color: #fff;
      }
    }

    /* 时间显示 */
    .vjs-time-control {
      /* 时间颜色 */
      color: #fff;
    }

    /* 全屏按钮 */
    .vjs-fullscreen-control {
      &:before {
        /* 图标颜色 */
        color: #fff;
      }
    }

    /* 音量控制 */
    .vjs-volume-panel {
      /* 静音按钮 */
      .vjs-mute-control {
        &:before {
          /* 图标颜色 */
          color: #fff;
        }
      }
    }
  }

  /* 播放器 */
  .vjs-big-play-button {
    /* 播放按钮 */
    &:before {
      /* 图标颜色 */
      color: #fff;
    }
  }

  /* 加载条 */
  .vjs-loading-spinner:before {
    border-color: transparent transparent transparent #fff;
  }
}

7. 更多

完整的Vue Video Player文档可在GitHub上找到：https://github.com/surmon-china/vue-video-player

Vue Video Player支持的选项和事件与video.js相同，详情请参阅video.js文档：https://docs.videojs.com/