A multi-channel video player for Wisdom Garden
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.
You can install it via NPM.
$ npm install vue-multi-player --save
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.
<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><!-- 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
})| 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 |
| event | parameter | required | description |
|---|---|---|---|
track:player:status |
status |
require |
Track player current status |
<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)
}
}
}- Support JS to call multi player
- Support single-screen live video full-screen viewing
- Support multi-channel broadcast live