Skip to content
Plugin take controlbar to Chimee video player.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
_config.yml
package.json
webpack.config.js

README.md

chimee-plugin-controlbar

Plugin take controlbar to Chimee video player. https://lizheming.github.io/chimee-plugin-controlbar/demo

Install

npm install @lizheming/chimee-plugin-controlbar

How To Use

UMD

<script src="https://lib.baomitu.com/chimee/2.0.0-alpha.3/index.browser.js"></script>
<script src="/dist/chimee-controlbar.umd.min.js"></script>
<script>
  Chimee.install(ChimeePluginControlbar);
  var player = new Chimee({
    width: 900,
    height: 492,
    wrapper: '.chimee-container',
    src: location.protocol + '//chimee.org/vod/1.mp4',
    isLive: false,
    box: 'native',
    autoplay: false,
    controls: false,
    plugin: [ChimeePluginControlbar.name]
  });
</script>

Webpack

First you should add alias to webpack config:

resolve: {
  alias: {
    '@lizheming/chimee-plugin-controlbar': '@lizheming/chimee-plugin-controlbar/dist/chimee-plugin-controlbar.umd.min.js'
  }
}

Then you can use:

import Chimee from 'chimee';
import ChimeePluginControlbar from '@lizheming/chimee-plugin-controlbar';

// install plugin
Chimee.install(ChimeePluginControlbar);
const player = new Chimee({
  plugin: [ChimeePluginControlbar.name]
});

Configuration

onNext

If you config onNext with function, a next button will show in player.

const player = new Chimee({
  plugin: [{
    name: ChimeePluginControlbar.name,
    onNext() {
      // play next video or other action
      console.log('next')
    }
  }]
});

render

If you want to custom html, you can use render function by React.

import React, {useContext} from 'react;
import ChimeePluginControlbar from '@lizheming/chimee-plugin-controlbar';

const {Progress, Play, Next, Time, PlaybackRate, Volume, FullScreen} = ChimeePluginControlbar.Plugins;
const Context = ChimeePluginControlbar.Context;

function CustomButton() {
  const ctx = useContext(Context);
  return (
    <span>
      Volume: {Math.round(ctx.volume * 100) + '%'}
    </span>
  );
}

const player = new Chimee({
  plugin: [{
    name: ChimeePluginControlbar.name,
    render() {
      return (
        <>
          <Progress />
          <div className="chimee-controlbar__groups">
            <div className="chimee-controlbar__float--left">
              <Play />
              <Next />
              <Time />
              <CustomButton />
            </div>
            <div className="chimee-controlbar__float--right">
              <PlaybackRate />
              <Volume />
              <FullScreen />
            </div>
          </div>
        </>
      );
    }
  }]
});
You can’t perform that action at this time.