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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | source | 播放流 | string | — | — | | type | 流类型 | string | mp4/flv | flv | | width | 宽度 | number | — | 800 | | height | 高度 | number | — | 600 | | poster | 视频封面 | string | — | — | | muted | 是否静音 | boolean | — | false | | autoplay | 是否自动播放 | boolean | — | false | | controls | 是否显示控件 | boolean | — | false | | preload | 预加载 | string | auto/metadata/none | auto | | mediaDataSource | 高级媒体数据源设置 | Object | — | — | | config | 高级设置 | Object | — | — |

mediaDataSource

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | type | 流类型 | string | mp4/flv | flv | | isLive | 指示数据源是否为实时流 | boolean | — | — | | cors | 是否为http获取启用CORS | boolean | — | — | | withCredentials | 发送跨域请求凭据 | boolean | — | — | | hasAudio | 指示流是否有音频曲目 | boolean | — | — | | hasVideo | 指示流是否有视频曲目 | boolean | — | — | | duration | 总媒体持续时间，单位为毫秒 | number | — | — | | filesize | 表示媒体文件的总文件大小| number | — | — | | url | 媒体URL，设置后覆盖 source | string | https(s) / ws(s) | — | | segments | 多部分播放，请参见MediaSegment | Array | — | — |

MediaSegment

| 参数 | 类型 | 说明 | | ----------- | -------- | ---------------------------------------- | | duration | number | 必填字段，表示以毫秒为单位的段持续时间 | | filesize | number | 可选字段，表示段文件大小 | | url | string | 必填字段，表示段文件URL |

Config

| 参数 | 类型 | 默认值 | 说明 | | -------------------------------- | --------- | ---------------------------- | ---------------------------------------- | | enableWorker? | boolean | false | Enable separated thread for transmuxing (unstable for now) | | enableStashBuffer? | boolean | true | Enable IO stash buffer. Set to false if you need realtime (minimal latency) for live stream playback, but may stalled if there's network jittering. | | stashInitialSize? | number | 384KB | Indicates IO stash buffer initial size. Default is 384KB. Indicate a suitable size can improve video load/seek time. | | isLive? | boolean | false | Same to isLive in MediaDataSource, ignored if has been set in MediaDataSource structure. | | lazyLoad? | boolean | true | Abort the http connection if there's enough data for playback. | | lazyLoadMaxDuration? | number | 3 * 60 | Indicates how many seconds of data to be kept for lazyLoad. | | lazyLoadRecoverDuration? | number | 30 | Indicates the lazyLoad recover time boundary in seconds. | | deferLoadAfterSourceOpen? | boolean | true | Do load after MediaSource sourceopen event triggered. On Chrome, tabs which be opened in background may not trigger sourceopen event until switched to that tab. | | autoCleanupSourceBuffer | boolean | false | Do auto cleanup for SourceBuffer | | autoCleanupMaxBackwardDuration | number | 3 * 60 | When backward buffer duration exceeded this value (in seconds), do auto cleanup for SourceBuffer | | autoCleanupMinBackwardDuration | number | 2 * 60 | Indicates the duration in seconds to reserve for backward buffer when doing auto cleanup. | | fixAudioTimestampGap | boolean | true | Fill silent audio frames to avoid a/v unsync when detect large audio timestamp gap. | | accurateSeek? | boolean | false | Accurate seek to any frame, not limited to video IDR frame, but may a bit slower. Available on Chrome > 50, FireFox and Safari. | | seekType? | string | 'range' | 'range' use range request to seek, or 'param' add params into url to indicate request range. | | seekParamStart? | string | 'bstart' | Indicates seek start parameter name for seekType = 'param' | | seekParamEnd? | string | 'bend' | Indicates seek end parameter name for seekType = 'param' | | rangeLoadZeroStart? | boolean | false | Send Range: bytes=0- for first time load if use Range seek | | customSeekHandler? | object | undefined | Indicates a custom seek handler | | reuseRedirectedURL? | boolean | false | Reuse 301/302 redirected url for subsequence request like seek, reconnect, etc. | | referrerPolicy? | string | no-referrer-when-downgrade | Indicates the [Referrer Policy][] when using FetchStreamLoader | | headers? | object | undefined | Indicates additional headers that will be added to request |

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

Methods

| 方法名 | 说明 | 参数 | |---------- |--------|---------- | | play | 播放 | | | pause | 暂停 | | | dispose | 销毁 | |