vue-multi-player v3.0.26-beta.6
Vue Multi Player
A multi-channel video player for Wisdom Garden
Getting Started
We provide a vue plugin to use the multi-player component in your own vue project.
We also support js to use the multi-player.
Installing
You can install it via NPM.
$ npm install vue-multi-player --save
Using
Generally configured in the webpack entry page main.js as follows:
//requires
import Vue from 'vue';
//import vue-multi-player
import multiPlayer from 'vue-multi-player-demo';
import 'vue-multi-player-demo/dist/styles/multi-player.css';
//use multiPlayer
Vue.use(multiPlayer);
Then you can use multi-player component in your own vue component.
Usage
<template>
<div id="app">
<multi-player :mode='mode' :videos='videos' :autoPlay='autoPlay'></multi-player>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
mode: 'live',
videos: [{
'src': 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
'type': 'application/x-mpegURL',
},{
'src': 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
'type': 'application/x-mpegURL',
},{
'src': 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
'type': 'application/x-mpegURL',
}],
autoPlay: true
}
}
}
</script>
JS Usage(not limited to vue)
<!-- video player will be mounted here -->
<div id="my-player" />
// also support commonjs
import VueMultiPlayer from 'vue-multi-player'
const { MultiPlayer } = VueMultiPlayer
const props = { videos: [], ... }
// param: id, props, options(Optional)
const player = new MultiPlayer('my-player', props)
player.on('eventName', () => {
// do something
})
Properties
property | type | default | description |
---|---|---|---|
videos | Array | require | video link collection played by multi-player |
mode | String | live | player mode, only support live mode |
autoPlay | Boolean | false | When set to true, the live video will automatically play in silent mode, this property is only applicable to live mode |
volume | Number | 0.8 | 0 - 1, Set the initial volume of the player |
Live Player Event
Player Event
event | parameter | required | description |
---|---|---|---|
track:player:status | status | require | Track player current status |
Give an example
<template>
<multi-player v-on="multiPlayerListeners"/>
</template>
export default {
computed: {
multiPlayerListeners() {
return Object.assign({}, this.$listeners, {
'track:player:status': this.setStatus
});
}
},
methods:{
setStatus(status) {
// here is your player status
console.log(status)
}
}
}
Debug
publish and link with yalc
Dependency
npm install -g yalc nodemon
Publish
Publish to local global instead of publishing to NPM
yalc publish
Watch
Watch file change and auto publish
npm run watch
Link
Create a soft link to this package in your project Notice: need to uninstall vue-multi-player in your project first (prevent partial conflicts)
cd your-project && yalc link vue-multi-player
Change log
2023-03-30
- Throw live mode error event
2023-03-27
- Update videojs-quality-selector
2023-01-17
- Use sass instead of node-sass
2023-01-06
- Support JS to call multi player
2020-05-08
- Support single-screen live video full-screen viewing
2020-03-09
- Support multi-channel broadcast live
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
11 months ago
9 months ago
11 months ago
9 months ago
9 months ago
8 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago