#媒体播放组件(组件化播放器)

组件功能

1.媒体播放器需求经常跟业务相关
2.提供底层媒体事件与方法，所有ui都可以认为是插件
3.通过插件机制适应不同业务需求

h5页面

将媒体事件和ui分开来看，本组件提供媒体核心事件，将ui通过插件形式与核心事件结合，可以重复使用某一插件，根据业务新增新插件

API

1. play()

2. pause()

3. seek()

4. on('eventName', () => {})

5. emit('eventName', {para: 1})

6. install(plugin) 安装插件

7. init() 初始化

Install

npm i @bbtfe/media-core

use

   <div id="wrapper"></div>

import MedioManger from '@bbtfe/media-core';

const medioManger = new MedioManger({
    type: 'video', // video  audio
    isNative: true, //默认都是h5的媒体元素
    wrapper: '#wrapper',
});
const plugin = {
    name: 'controller',
    el: '<div id="mbtn" style="width: 100px;height: 100px;background:red;">play</div>',
    data: {
        text: 'play',
    },
    methods: {
        changeVideoStatus (e) {
            this.emit('customEvent', {m:4444, mm:999});
            this.play();
        },
        changeButtonText (text) {
            this.text = text;
        },
    },
    create () {
        document.getElementById('mbtn').addEventListener('click', this.changeVideoStatus);
    },
    events: {
        customEvent(para) {
            window.console.log(para, 999);
        },
        pause (p) {
            window.console.log('pause', p.currentTime);
            this.changeButtonText('play');
        },
        ended (p) {
            window.console.log('end', p.currentTime);
        },
        play (p) {
            window.console.log('play', p.currentTime);
            this.changeButtonText('pause');
        },
        progress (p) {
            window.console.log('progress', p.currentTime);
        },
        timeupdate(p) {
            window.console.log('timeupdate', p.currentTime);
        },
        playing (p) {
            window.console.log('playing', p.currentTime);
        }
    },
};

medioManger.install(plugin);
medioManger.init();
medioManger.seek(60);
//medioManger.load('http://contentvideo.babytreeimg.com/contentplatform/20190213/205750_FhJ9n0WXO77mI7B8xthDDTf3YxO_.mp3');
medioManger.load('http://cdn.toxicjohann.com/lostStar.mp4');
medioManger.on('customEvent', (para) => {
    window.console.log(para, 4444444);
});