这是VueJS中制作的html5视频组件，用于快速添加带有占位符和简介的视频。

特征：

• 延迟加载/播放，直到您单击缩略图。
• 允许访问者在悬停时预览视频。
• 自定义播放器控件。

下载安装:

# NPM
$ npm install @algoz098/vue-player --save

使用：

导入组件。

import vuePlayer from '@algz098/vue-player'

注册组件。

Vue.component(vuePlayer)
// 或
export default {
  components: {
    vuePlayer
  }
}

将组件插入模板。

<vue-player 
  src="sample.mp4" 
  poster="poster.jpg" 
  title="这是一个标题" 
  v-model="playing">
</vue-player>

所有默认props，用于自定义HTML5视频播放器。

/**
   * 设置标题.
   * 它出现在覆盖的图上
   * @model
   */
title: {
  type: String,
  default: null
},
/**
   * 设置播放/暂停。
   * 它会自动将视频设置为正确的状态
   * @model
   */
value: {
  type: Boolean,
  default: undefined
},
/**
   * 定义视频标记的源。
 * 如果数组使用src索引来选择一个
   */
src: {
  required: true,
  type: [String, Array]
},
/**
   * 仅当src是数组时使用
 * 设置src的索引
   */
srcIndex: [String, Number],
/**
   * 将视频设置为加载时自动播放
   */
autoplay: {
  type: Boolean,
  default: false
},
/**
   * 鼠标悬停时显示视频预览
   */
previewOnMouse: {
  type: Boolean,
  default: false
},
/**
   * 在加载视频时将其设置为playsinline
   */
playsinline: {
  type: Boolean,
  default: false
},

/**
   * 使用视频开始播放一次设置图像占位符
   */
poster: String,

/**
   * 如果你想要一个视频摘要你可以使用这个，将播放出声音
   */
videoPlaceholderSrc: String,
/**
   * 定义播放器的音量
 * 来自0 util 1的值
   */
volume: {
  type: Number,
  default: undefined
},

/**
   * 显示/隐藏控件
   */
controls:  {
  type: Boolean,
  default: undefined
},
/**
   * 覆盖层的类
   */
overlayClass: {
  default: "vue-video-center"
},
/**
   * 控件栏的类
   */
controlsClass:{
  default: "vue-video-player-controls"
},
/**
   * 播放按钮类
   */
playButtonClass:{
  default: null
},
/**
   * 播放按钮的样式
   */
playButtonStyle:{
  default: null
},
/**
   * 音量按钮的类
   */
volumeButtonClass:{
  default: null
},
/**
   * 音量按钮的样式
   */
volumeButtonStyle:{
  default: null
},
/**
   * 计时器类
   */
timerClass:{
  default: 'timer'
},
/**
   * 计时器样式
   */
timerStyle:{
  default: null
},
/**
   * 全屏按钮类
   */
fullscreenButtonClass:{
  default: 'fullscreen-button-class'
},
/**
   * 全屏按钮样式
   */
fullscreenButtonStyle:{
  default: null
},
/**
   * 控件栏的样式
   */
controlsStyle: {
  default: undefined
}