react项目中集成ckplayer播放器插件

最近在学习ckplayer播放器，想把它用于web上播放公司的摄像头监控视频。下面记录一下
1、下载ckplayer包下载地址
2、把下载后的包解压后把ckplayer文件夹及里面的内容一起复制到需要集成项目的公共文件下，我这里的项目配置的公共文件夹为public


3、在项目的入口index.html模板文件下引入

  <script type="text/javascript" src="%PUBLIC_URL%/ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>

注意这里的%PUBLIC_URL%/不可以忽略。
4、避免ckplayer当做ckplayer is not defined，需要在index.html文件中还要赋值给window，才可以在组件中使用。

window.onload = function () {
        window.ckplayer = ckplayer;
    }

5、设置节点容器播放视频

//定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
      container: '.videoPlayer', //“#”代表容器的ID，“.”或“”代表容器的class
      variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
      autoplay: true,
      live: true,
      debug: true,
      flashplayer: false,
      html5m3u8: true,
      video: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',//CCTV1高清
      };
      var player = new window.ckplayer(videoObject);//初始化播放器
      

我这里是直接把这段直接写在componentDidMount(){}中，直接组件挂载完后就播放。
render中设置播放容器

<div className="videoPlayer" style={{width: "600px", height: "400px"}} id="video"></div>

效果：