Vue实现视频播放

一.安装插件

使用npm把插件安装到项目中

npm i -S v-playback

在项目入口main.js中引入插件

import Vue from 'vue'
import vPlayBack from 'v-playback'
Vue.use(vPlayBack)

二.在页面 / 模块中使用

<template>
  <v-playback :url="url"></v-playback>
</template>

<script>
export default {
  data(){
    return {
      url: 'http://some-site.com/some-video.mp4'
    }
  }
}
</script>

三.入参选项

选项名	类型	参数描述	必填	默认值
url	String	视频文件地址	true
loop	Boolean	是否循环播放	false	false
auto-play	Boolean|String	自动开始播放视频 play 正常自动播放 muted 静音自动播放	false	false
poster	String	视频播放前的封面照片	false

四.响应事件

参数名	参数描述	返回数据
play	视频开始播放	Player Object
pause	视频暂停	Player Object
end	视频播放完成，在视频正常播放完成时，触发 end 事件之前会触发 pause 事件	Player Object