如何在vue中引入chimee播放器

第一步：下载 

npm i chimee

npm i chimee-plugin-controlbar

npm i chimee-plugin-danmu

第二步在组件中引入

<template>
  <div id="wrapper"></div>
</template>
<script>
import chimee from "chimee";
import chimeePluginControlbar from "chimee-plugin-controlbar";
import chimeePluginDanmu from "chimee-plugin-danmu";
import Barrages from '../libs/danmu'
chimee.install(chimeePluginControlbar);
chimee.install(chimeePluginDanmu);
// chimee.install(Barrages);


export default {
  data() {
    return {
      player: null,
      defaultData: {
        text: "你真的很漂亮",
        mode: "flow",
        fontSize: "big",
        color: "#fff",
      },
    };
  },
  mounted() {
    let self=this;
    this.player = new chimee({
      wrapper: document.getElementById("wrapper"), // video dom容器
      // src:'http://cdn.toxicjohann.com/lostStar.mp4',
      isLive:false,//是否直播
      src: "http://211.94/268769823.mp4",
      controls: true,
      // 使用插件
      plugin: [
        {
          name: chimeePluginControlbar.name, // 或者 'chimeeControl'
          majorColor: "#FFF", //该插件中，所有的 svg 图 播放进度条，进度颜色 声音控制条，音量颜色
          hoverColor: "#9d9d4c", //鼠标放在svg上时的颜色,
          children: {
            play: {
              // 配置播放暂停键 icon 及事件
              bitmap: false,
              icon: {
                play: "",
                pause: "",
              },
            },
            progressTime: {
              //时间展示组件
            },
            progressBar: {
              //进度条控制组件
            },
            volume: {
              //   bitmap: false,
              //   icon: {
              //     play: "",
              //     pause: "",
              //   },
              layout: "vertical",
            },
            playbackrate: {
              //切换播放倍速组件
              list: [
                { name: "0.5倍速", value: 0.5 },
                { name: "0.75倍速", value: 0.75 },

                { name: "1倍速", value: 1, default: true },
                { name: "1.25倍速", value: 1.25 },
                { name: "1.5倍速", value: 1.5 },
                { name: "2倍速", value: 2 },
              ],
            },
            clarity: {
              //切换清晰度组件
              list: [
                {
                  name: "标清",
                  src: "http://211.823/268769823.mp4",
                },
                {
                  name: "高清",
                  src: "http://211.94.3/268769823.mp4",
                },
                {
                  name: "原画",
                  src: "http://211.94/268769823/268769823.mp4",
                },
              ],
            },
            screen: {
              //配置全屏／非全屏 icon 及事件
              icon: {
                full: "",
                small: "",
              },
            },
          },
        },
        // 'Barrages'
        {
          name: chimeePluginDanmu.name,
          mode: "css",
          lineHeight: "60",
          fontSize: "24",
          updateByVideo: true,
          event: {
            receiveData(){
             console.log('000')
            },
          },
        },
      ],
    });
  },
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  display: block;
   100%;
  height: 100%;
}
video {
   100%;
  height: 100%;
  display: block;
  background-color: #000;
}
video:focus,
video:active {
  outline: none;
}
.chimee-flex-component svg {
  /* background-image: url('../assets/btn_play_5g.png'); */
  background-color: brown;
}
vue-baberrage{
height: 40px;
widows: auto;
}
 .barrages-drop {
    .baberrage-lane{
  .blue .normal{
        border-radius: 100px;
        background: #e6ff75;
        color: #fff;
      }
     .green .normal{
        border-radius: 100px;
        background: #75ffcd;
        color: #fff;
      }
       .red .normal{
        border-radius: 100px;
        background: #e68fba;
        color: #fff;
      }
    .yellow .normal{
        border-radius: 100px;
        background: #dfc795;
        color: #fff;
      }
      .baberrage-stage {
        position: absolute;
         100%;
        height: 212px;
        overflow: hidden;
        top: 0;
        margin-top: 130px;
      }
    }
 }
</style>