Developing Chimee Video Player Plugins with React: A Practical Guide

Chimee is an open‑source, extensible H5 component‑based video player framework. The author needed a custom control‑bar plugin, found the default style insufficient, and therefore rewrote the plugin (lizheing/chimee-plugin-controlbar) to better suit the project requirements.

According to the official documentation, a Chimee plugin must expose an object containing several key properties: name (the plugin identifier), el (the HTML template), data (state), methods (functions), create (initialisation), and events (event callbacks). The following example demonstrates a simple controller plugin:

const plugin = {
  // plugin name
  name: 'controller',
  // plugin DOM element
  el: '
play
',
  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');
    }
  }
};

// install the plugin
Chimee.install(plugin);

const player = new Chimee({
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  wrapper: '#wrapper',
  plugin: ['controller']
});

While this approach works, two DOM‑related problems arise: the data field cannot directly bind to the HTML template, and event listeners must be attached manually after the DOM is created.

To alleviate these issues, the author introduced React. The plugin still follows the Chimee lifecycle, but the UI is rendered by React, allowing state management and declarative updates. The React‑based plugin is defined as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Context from './Context';

export default {
  Context,
  name: 'plugin-demo',
  el: `
`,
  create() {
    ReactDOM.render(
,
      this.$dom
    );
  }
};

Because the React component needs to call back into the Chimee plugin, the instance is passed down via a React Context. Inside a component, the context is consumed and the plugin’s event system is used:

import React, { useContext, useState, useEffect } from 'react';
import Context from '../Context';

export default function () {
  const ctx = useContext(Context);
  const [cur, setCur] = useState(0);

  useEffect(() => {
    ctx.$on('timeupdate', () => setCur(ctx.currentTime));
  }, []);

  return (
{cur}
);
};

Using Context simplifies data transmission across deep component hierarchies; if the component tree is shallow, props could be used instead.

For external data such as the next video’s title and cover, the author employed custom events. The plugin listens for a custom event, updates its UI, and avoids direct DOM manipulation.

When multiple plugins need to act on the same event (e.g., playing an ad, showing a countdown, then playing the next video), Chimee’s event system allows early callbacks to return false to block further propagation. After the task completes, the event can be re‑emitted manually. The following snippet illustrates this pattern:

import React, { useEffect } from 'react';
import Context from './context';

export default function () {
  const ctx = useContext(Context);

  useEffect(() => {
    const onEnded = (event) => {
      if (event === 'manual') {
        return true; // allow normal flow
      }
      setTimeout(() => ctx.$emit('ended', 'manual'), 10000);
      return false; // block further handling
    };
    ctx.$on('ended', onEnded);
    return () => ctx.$off('ended', onEnded);
  }, []);

  return (
Delay 10 seconds before ending
);
};

In summary, Chimee’s plugin architecture is highly extensible. By integrating React, developers can replace the native data , methods , and events properties with React state, component methods, and Context‑based event handling, while still leveraging Chimee’s ctx.$on and ctx.$emit for low‑level player events.