Vue-multi-player-beta 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.

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 Vuex from 'vuex';
import VueI18n from 'vue-i18n';
import VueResource from 'vue-resource'

//import vue-multi-player
import multiPlayer from 'vue-multi-player-demo'

Vue.use(Vuex);
Vue.use(VueResource);
Vue.use(VueI18n);
const store = new Vuex.Store();

//configure i18n, merge your custom messages 
const messages = {
    tw: Object.assign({message: '你好-台湾'}, multiPlayer.langs.tw),
    zh: Object.assign({message: '你好'}, multiPlayer.langs.zh),
    en: Object.assign({message: 'hello'}, multiPlayer.langs.en)
};
const defaultLocale = 'zh'
const i18n = new VueI18n({
    locale: defaultLocale, // set locale
    messages // set locale messages
});

//use multiPlayer
Vue.use(multiPlayer, {
    store, i18n(path, options) {
        let value = i18n.t(path, options);
        if (value !== null && value !== undefined) return value;
        return '';
    }
});

Then you can use multi-player component in your own vue component.

Usage

    <multi-player   :custom-plugins="plugins"
                    :videos="videos"
                    :resource-code="resourceCode"
                    :sider-width="270"
                    />
    export default {
        data() {
            return {
                videos: [{
                    'index': 0,
                    'src': 'videoSrc',
                    'type': 'video/mp4',
                    'volume': 0.8,
                    'videoType': 'instructor'
                }],
                plugins: {
                    mediaTopic: {
                        toggle: true,//control whether the built-in plugin is used
                        server: '',//one server site that can get media topic
                    },
                    note: {
                        toggle: true,
                        server: '', //one server site that can get note
                        token: '', //server token
                        course_id: '', //course id
                        currentUser: {} //current user
                    },
                    fav: {
                        toggle: true,
                        isFav: false // whether the video has been collected
                    },
                    download: {
                        toggle: true
                    },
                    caption: {
                        toggle: true,
                        captionUrl: ''// caption url
                    },
                    clip: {
                        toggle: false
                    }
                },
                resourceCode: 0,
            };
        },

Properties

property	type	default	description
`videos`	`Array`	`require`	video link collection played by multi-player
`resource-code`	`Number`	`require`	resource code
`custom-plugins`	`Object`	`{}`	configuration items for the plug-in built into the multi-player. If not set, all plug-ins will be disabled.
`slider-width`	`Number`	`270`	set the width of the player area occupied by the plug-in panel on the right side of the player

Event

Common Event

event	parameter	required	description
`common:file:upload`	`files,uploadType,callback`	`require`	When a file upload occurs in the player's internal plug-in, the event will be called. The user needs to customize the file upload logic and execute the callback function to callback after the upload is completed. The callback function parameter is the filekeys returned after uploading the file.
`common:user:getUsersByUserNos`	`usernos,callback`	`require`	When the player requests to obtain the user information corresponding to usernos, the event will be called. The user should customize the logic for obtaining the user information. After the success, the callback function is executed. The parameter of the callback function is the user information list.
`common:file:getUrlByFileKeys`	`fileKeys,callback`	`require`	When the player tries to obtain the corresponding urls according to filekeys, the event will be called. The user should customize the url logic and execute the callback function after the success. The parameters of the callback function are the urls list.

Plugin Event

If the toggle of the plugin is set to true, then the corresponding event of the plugin is also required

plugin	event	parameter	description
`mediaTOpic`	`plugin:mediaTopic:toManager`	`topicType`	jump to media topic manager page
`video`	`plugin:video:download`		user need to customize download logic for video download
`video`	`plugin:video:clip`		jump to video clip page
`video`	`plugin:video:fav`		collect or uncollect
`caption`	`plugin:caption:upload`		upload video caption
`caption`	`plugin:caption:delete`		delete video caption
`note`	`plugin:note:delete:status`	`status`	whether the note was deleted successfully
`note`	`plugin:note:load:status`	`status`	whether the note was loaded successfully
`note`	`plugin:note:create:status`	`{type,status}`	whether the note was created successfully
`note`	`plugin:note:update:status`	`{type,status}`	whether the note was updated successfully

Give an example

<multi-player v-on="multiPlayerListeners"/>
export default {
    computed: {
         multiPlayerListeners() {
            return Object.assign({}, this.$listeners, {
                'plugin:mediaTopic:toManager': this.toMediaTopic,
                'plugin:video:download': this.downloadVideo,
                'plugin:video:clip': this.toVideoClip,
                'plugin:video:fav': this.favSwitch,
                'plugin:caption:upload': this.uploadCaption,
                'plugin:caption:delete': this.deleteCaption,
                'plugin:note:delete:status': this.showNoteDeleteStatus,
                'plugin:note:load:status': this.showNoteLoadStatus,
                'plugin:note:create:status': this.showNoteCreateStatus,
                'plugin:note:update:status': this.showNoteUpdateStatus,
                'common:file:upload': this.uploadFile,
                'common:user:getUsersByUserNos': this.getUserByUserNos,
                'common:file:getUrlByFileKeys': this.getFileUrlByFileKeys
               });
            }
    },
    methods:{
        uploadFile(files, uploadType, callback) {
           //here is your upload logic
           const keys = []
           callback(keys)
        },
        //and so on
    }
}

Change log

Add new mode : Multi Live Player

deepmerge element-resize-event lodash rollup v-click-outside-x video.js view-design vue vue-i18n vue-resource vuewordcloud vuex

4 years ago

4 years ago

4 years ago

4 years ago