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. Currently only supports live mode
Installing
You can install it via NPM.
$ npm install vue-multi-player-demo --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>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)
}
}
}Change log
2020-05-08
- Support single-screen live video full-screen viewing
2020-03-09
- Support multi-channel broadcast live