Vue.js的响应式视频背景组件 - vue-responsive-video-background-player

Vue.js的响应式视频背景组件 - vue-responsive-video-background-player
发布时间 2020年4月14日
插件作者 avidofood

响应式视频背景组件,可根据屏幕尺寸动态调整视频解决方案。

变更日志:

v2.1.2(2020年12月29日)

  • 修复objectFit

v2.1.1(12/01/2020)

  • 添加了视频淡入淡出

v2.0.2(11/29/2020)

  • 固定发射并更新npm

v2.0.0(2020年10月26日)

  • Vue 3.xx发行

v1.1.3(10/25/2020)

  • 致力于Vue 3.0

v1.1.1(06/27/2020)

  • 修复MediaType检测

安装和下载:

# NPM
$ npm install vue-responsive-video-background-player --save

使用

1.安装并导入组件。

import VideoBackground from 'vue-responsive-video-background-player'
Vue.component('video-background', VideoBackground);

2.在模板中创建视频背景。

<video-background 
  src="bg.mp4"
  poster="poster.jpg"
  :sources="[
      {src: '900>.mp4', res: 900, autoplay: true}, 
      {src: '640.mp4', res: 638, autoplay: true, poster: 'mobile-poster.png'}
  ]"
  style="max-height: 100%; height: 100vh;"
  overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)" 
>
  <h1>www.vue365.cn</h1>
</video-background>

3.可用props 。

sources: {
  type: Array,
  default() {
      return [];
  },
  validator: sourcesValidator,
},
autoplay: {
  type: Boolean,
  default: true,
},
poster: {
  type: String,
  default: '',
},
overlay: {
  type: String,
  default: '',
}

4.视频播放器的可用props 。

src: {
  type: String,
  required: true,
},
muted: {
  type: Boolean,
  default: true,
},
loop: {
  type: Boolean,
  default: true,
},
preload: {
  type: String,
  default: 'auto',
},
objectFit: {
  type: String,
  default: 'cover',
},
playsWhen: {
  type: String,
  default: 'canplay',
  note: 'Google HTML Video Events',
}