# 自定义插件

插件开发核心在于拿到player实例后进行操作，仅此而已。其次有一些注意点:

插件包应该设置thumbplayer-h5为peerDependencies (opens new window)，避免存在多版本的thumbplayer-h5导致插件注册失败（插件工厂注册在thumbplayer-h5包内的局部变量）
插件基类是一个事件收发器(EventEmitter)，插件可以在自身广播一些事件，但不要用player全局广播事件、增加复杂度
插件用ts编写的话，期望在tsconfig.json中设置importHelpers: true，并将tslib设置为生产依赖，以减少构建体积

也可以使用脚手架 @tencent/create-thumbplayer-plugin (opens new window) 快速创建

# 播放自定义视频id

ThumbPlayerH5官方提供了腾讯视频的id换地址插件(thumbplayer-getinfo-vod)，如果要播放自己业务的视频id，则需要实现视频地址服务（VideoReqInfoPlugin）插件。

import { H5Player, Plugin, IGetinfo, VideoReqInfoPluginName } from '@tencent/thumbplayer-h5';

/** 自定义插件需要实现IGetinfo接口，thumbplayer-h5通过这个接口定义和插件通信 */
H5Player.registerPlugin(VideoReqInfoPluginName, class MyVideoReqInfoPlugin extends Plugin implements IGetinfo {
  public async request(id: string) {
    if (id !== 'myVid') return { error: {} };
    return {
      urlConfig: { url: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4' },
      resData: {},
      parseData: {},
    }
  }

  public abort() {}
})

const player = new H5Player({ container: '#app' });
player.play('myVid');

一个简单的视频地址服务插件，只需要实现request和abort方法即可。requst输入id，输出urlConfig(播放参数)和resData(接口原始数据)；abort中断当前请求，避免竞态问题（eg:上一个请求晚于当前请求返回时）。

如果要实现切换清晰度，则需要补充返回parseData.definitionList。

# 补充说明

一般地，希望插件可以尽量通用，方便复用于多个业务。所以就要自己实现插件间的耦合/通信逻辑，例如实现点击控制栏上的某个按钮来切换软字幕，需要这样写：

import { H5Player } from '@tencent/thumbplayer-h5';
import { SubtitlePlugin } from '@tencent/thumbplayer-plugin-subtitle';
import { CtrlbarPlugin, CTRL_EVENTS } from '@tencent/thumbplayer-plugin-ctrlbar';

const player = new H5Player({ 
  container: '#player',
  plugins: [
    CtrlbarPlugin.pluginName,
    SubtitlePlugin.pluginName,
  ];
});
player.load({ url: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4' });

const ctrl = player.plugins[CtrlbarPlugin.pluginName];
ctrl.on(CTRL_EVENTS.SET_LEVEL, (param) => {
  const subtitle = player.plugins[SubtitlePlugin.pluginName];
  subtitle.setSubtitleURL(param);
})

类似地，其他插件之间的通信逻辑也要放在业务播放器来写，虽然插件之间本身提供了相互访问的能力。

← 插件化概述 →