vue-multi-player.js v3.0.3-beta.1

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.

We also support js to use the multi-player.

Installing

You can install it via NPM.

$ npm install vue-multi-player --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>

JS Usage(not limited to vue)

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

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

2023-01-06

• Support JS to call multi player

2020-05-08

• Support single-screen live video full-screen viewing

2020-03-09

• Support multi-channel broadcast live