vue-flv-player v1.0.3

Vue-Flv-Player 播放器

• 😊 基于 Vue + flv.js 开发；
• 😂 支持现代浏览器；

NPM安装

npm i vue-flv-player --save

CDN引用

目前可以通过 unpkg.com/vue-flv-player 或者 www.jsdelivr.com/package/npm/vue-flv-player 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-flv-player/dist/vue-flv-player.umd.min.js"></script>

<!-- 或者 -->
<script src="https://cdn.jsdelivr.net/npm/vue-flv-player/dist/vue-flv-player.umd.min.js"></script>

使用

全局使用

// main.js
import Vue from 'vue'
import App from './App.vue'

import vueFlvPlayer from 'vue-flv-player'
Vue.use(vueFlvPlayer)

<template>
  <div id="app">
    <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="src" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      src:"http://resource.wangdaodao.com/test.flv"
    };
  }
};
</script>

局部使用

<template>
  <div id="app">
    <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="src"/>
  </div>
</template>

<script>
import vueFlvPlayer from 'vue-flv-player'

export default {
  name: 'App',
  components: {
    vueFlvPlayer,
  },
  data() {
    return {
      src:"http://resource.wangdaodao.com/test.flv"
    };
  }
};
</script>

FLV

FLV例子

<template>
  <div>
    <vue-flv-player :autoplay="true" :controls="true" :muted="true" ref="myPlayer" :source="src"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src:"http://resource.wangdaodao.com/test.flv"
    };
  }
};
</script>

MP4

MP4

<template>
  <div>
    <vue-flv-player controls autoplay :muted="true" :source="src" type="mp4"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "http://vjs.zencdn.net/v/oceans.mp4",
    };
  },
};
</script>

切换类型

切换类型

<template>
  <div>
    <button @click="change(1)">FLV</button>
    <button @click="change(2)">MP4</button>
    <vue-flv-player controls autoplay :muted="true" :source="src" :type="type"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      src: '',
    };
  },
  methods: {
    change(val){
      switch (val) {
        case 1:
          this.type = 'flv';
          this.src = 'http://resource.wangdaodao.com/test.flv';
          break;
        case 2:
          this.type = 'mp4';
          this.src = 'http://vjs.zencdn.net/v/oceans.mp4';
          break;
      }
    }
  }
};
</script>

Attributes

mediaDataSource

MediaSegment

Config

更多配置，请看 flv.js 官方文档

Methods