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