vue-multi-player

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

Live Player Event

Player Event

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