1.0.0 β’ Published 3 years ago
jpvp v1.0.0
Vue-Flv-Player
- π Vue +
flv.js
; - π Support for modern browsers;
- π δΈζζζ‘£
NPM
npm i vue-flv-player --save
CDN
Get the latest version from unpkg.com/vue-flv-player or www.jsdelivr.com/package/npm/vue-flv-player , and import JavaScript and CSS file in your page.
<script src="https://unpkg.com/vue-flv-player/dist/vue-flv-player.umd.min.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/vue-flv-player/dist/vue-flv-player.umd.min.js"></script>
Quick Start
// 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>
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
<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>
Change type
<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
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
source | source | string | β | β |
type | type | string | mp4 /flv | flv |
width | width | number | β | 800 |
height | height | number | β | 600 |
poster | Video cover | string | β | β |
muted | muted | boolean | β | false |
autoplay | autoplay | boolean | β | false |
controls | controls | boolean | β | false |
preload | preload | string | auto/metadata/none | auto |
mediaDataSource | Media data source settings | Object | β | β |
config | advanced setting | Object | β | β |
mediaDataSource
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
type | type | string | mp4 /flv | flv |
isLive | the data source is a live stream | boolean | β | β |
cors | Indicates whether to enable CORS for http fetching | boolean | β | β |
withCredentials | Indicates whether to do http fetching with cookies | boolean | β | β |
hasAudio | Indicates whether the stream has audio track | boolean | β | β |
hasVideo | Indicates whether the stream has video track | boolean | β | β |
duration | Indicates total media duration, in milliseconds | number | β | β |
filesize | Indicates total file size of media file, in bytes | number | β | β |
url | Indicates media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket) | string | https(s) / ws(s) | β |
segments | Optional field for multipart playback, see MediaSegment | Array | β | β |
MediaSegment
Attribute | Type | Description |
---|---|---|
duration | number | Required field, indicates segment duration in milliseconds |
filesize | number | Optional field, indicates segment file size in bytes |
url | string | Required field, indicates segment file URL |
Config
Attribute | Type | Default | Description |
---|---|---|---|
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 |
More configurationοΌflv.js
flv-api
Methods
Method | Description | Parameters |
---|---|---|
play | play | |
pause | pause | |
dispose | dispose |
1.0.0
3 years ago