2025年使用 React 为 Chimee 开发插件

科技前沿 • 2025-02-21 15:19 • 阅读 55

大家好，我是讯享网，很高兴认识大家。

编者按：本文作者奇舞团前端开发工程师李喆明。

Chimee¹ 是由奇舞团开源的一套可扩展的H5组件化播放器框架。由于前段时间业务有视频播放的需求所以使用了它，并基于它提供的插件系统之上开发了一系列的插件，其中最复杂的是控制条插件。由于默认的样式无（实）法（在）满（是）足（太）设（难）计（看）需（了）求（！），所以我们重新开发了一套 lizheing/chimee-plugin-controlbar² 并总结一些心得，希望对大家有帮助。

讯享网

Chimee 插件规范

开篇之前我们先简单的了解下如何开发一款 Chimee 的插件，文档³ 提供了一个非常简单的示例告诉我们大概的流程。

const plugin = {   // 插件名为 controller   name: 'controller',   // 插件实体为按钮   el: '<button>play</button>',   data: {     text: 'play'   },   methods: {     changeVideoStatus () {       this[this.text]();     },     changeButtonText (text) {       this.text = text;       this.$dom.innerText = this.text;     }   },   // 在插件创建的阶段，我们为插件绑定事件。   create () {     this.$dom.addEventListener('click', this.changeVideoStatus);   },   // 插件会在播放暂停操作发生后改变自己的文案及相应的行为   events: {     pause () {       this.changeButtonText('play');     },     play () {       this.changeButtonText('pause');     }   } }; // 安装插件 Chimee.install(plugin); const player = new Chimee({   // 播放地址   src: 'http://cdn.toxicjohann.com/lostStar.mp4',   // dom容器   wrapper: '#wrapper',   // 使用插件   plugin: ['controller

讯享网

2025年使用 React 为 Chimee 开发插件

Chimee 插件规范

相关推荐