chimee视频播放插件

在react中引入chimee插件

1.下载依赖包chimee和chimee-plugin-controlbar

chimee是主要插件，用于视频的播放；

chimee-plugin-controlbar是控制栏，可配置项包括进度条，时间，播放和暂停等；

2.html

<div id="myVideo"/>

3.引入

import Chimee from 'chimee';
import ChimeePluginControlbar from 'chimee-plugin-controlbar';
Chimee.install(ChimeePluginControlbar);

4.初始化

this.myVideo = new Chimee({
      wrapper: '#myVideo',
      src: Video,
      controls: true,
      plugin: [
        {
          name: ChimeePluginControlbar.name,
          children: {
            play: true, // 播放按钮
            progressTime: true, // 时间
            progressBar: { // 进度条
              layout: 'top',
            },
            playbackrate: { // 播放倍速
              list: [
                { name: '0.5倍速', value: 0.5 },
                { name: '1倍速', value: 1, default: true },
                { name: '1.5倍速', value: 1.5 },
                { name: '2倍速', value: 2 },
                { name: '2.5倍速', value: 2.5 },
                { name: '3倍速', value: 3 },
              ],
            },
            volume: true, // 声音
            screen: true, // 是否全屏
          },
        },
      ],
    });

    // 点击播放
    this.myVideo.on('play', () => {
      console.log('play')
    });

PS: h5 video不支持avi格式播放;切换视频可用.load(url)方法。