vue-player-media

基于 Vue 的视频播放器(支持播放mp4、m3u8、swf、flv)

• npm
• 用法
• flv格式说明
• Example
• Props
• Methods

安装

npm

$ npm install vue-player-media -S

use

main.js:

import Vue from 'vue'
import App from './App.vue'
import VuePlayer from 'vue-player-media'
Vue.use(VuePlayer)

new Vue({
  el: '#app',
  components: {
    App
  }
})

explain

*因为flv.js本身的问题，项目中想播放flv格式视频，（我）目前采用的是这种方式

使用方式： 1把flv.js静态资源放到自己项目文件夹（flv静态资源地址：https://github.com/IT-Rafi/vue-player-media/tree/master/static） 2.在项目中的main.js里引入 main.js:

播放器容器大小可自己设置

window.flv = require('flv.js')

new Vue({
  el: '#app',
  components: {
    App
  }
})

Example

template

  <vue-player 
    :id="'detailplayer'" 
    :type="type" 
    :auto="false" 
    :isSwf="false" 
    :src="video_url" 
    :height="'338px'">
  </vue-palyer>

script

export default {
  data () {
    return {
      type:'mp4',
      video_url:'https://v-cdn.zjol.com.cn/276985.mp4'
    }
  },
  methods: {
    //获取视频时长
    getVtime (duration) {
      console.log(duration)
    }
  }
}

Props

| prop | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | id | 元素id | string | '' | | type | 视频类型 | string | mp4 | | auto | 是否自动播放 | Boolean | fasle | | isSwf | 是否为swf格式 | Boolean | false | | src | 播放地址 | string | `` | | height | 播放器高度 | string | auto |

Methods

| 方法名 | 类型 | 描述 | | :--- | --- | --- | | getVtime | string | 获取视频时长(swf不可获取)