Vue-multi-player-dev NPM

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)
        }
    }
}