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

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

Debug

publish and link with yalc

Dependency

npm install -g yalc nodemon

Publish

Publish to local global instead of publishing to NPM

yalc publish

Watch

Watch file change and auto publish

npm run watch

Link

Create a soft link to this package in your project Notice: need to uninstall vue-multi-player in your project first (prevent partial conflicts)

cd your-project && yalc link vue-multi-player

Change log

2023-03-30

• Throw live mode error event

2023-03-27

• Update videojs-quality-selector

2023-01-17

• Use sass instead of node-sass

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