react中index中引入ckplayer播放器

1. 下载包到本地

    网址： http://www.ckplayer.com/

将包解压放于public文件夹下

3. index.html中引入ckplayer.js

在body标签下添加

script type="text/javascript">
    // 动态生成腳本
    // urls----script.src地址数组、callback---回调函数
    function loadScripts(urls, callback) {
      callback = callback || function () {

      };

      var loader = function (src, handler) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        //重点！！！！script加载成功
        script.onload = function () {
          script.onload = null;
          script.onerror = null;
          handler();
        };
        script.onerror = function () {
          script.onload = null;
          script.onerror = null;
          callback({
            message: src + '依赖未加载成功！'
          });
        };
        var head = document.getElementsByTagName('body')[0];
        (head || document.body).appendChild(script);

      };
      //自执行函数，用于循环loader
      (function run() {
        if (urls.length > 0) {
          loader(urls.shift(), run);
        } else {
          callback();
        }
      })();
      console.log(document.head);
    }

    var relies = ['%PUBLIC_URL%/ckplayer/ckplayer/ckplayer.js']
    window.onload = function () {
      loadScripts(relies, function cb(err) {
        console.log(relies)
        if (err) {
          return console.log(err.message);
        } else {
        /*这里是重点，create-react-app 默认开启eslint,不影响eslint的使用情况下，需要定义全局变量接受，否则被报ckplayer is not defined 的错误*/
          window.ckplayer = ckplayer;
          console.log(window.ckplayer)
        }
      })
    }
  </script>

到此为止 引包结束，并赋予全局变量，接下来在组件中调用

1. 定义容器
   以illegals.jsx组件为例
   

 <div id="video" className="w-100 h-100"></div>

2. 配置ckplayer

  ckPlayerInit = () => {
    console.log(window.ckplayer)
    let videoObject = {
        container: '#video', //容器的ID或className
        variable: 'player', //播放函数名称
        loop: false, //播放结束是否循环播放
        autoplay: false,//是否自动播放
        // poster: 'material/poster.jpg', //封面图片
       /* preview: { //预览图片
          file: ['material/mydream_en1800_1010_01.png', 'material/mydream_en1800_1010_02.png'],
          scale: 2
        },*/
        video: [
          ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
          ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
          ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 0],
          ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
        ]
      }
      let player = new window.ckplayer(videoObject)
  };

3. 调用 在componentDidMount生命周期进行调用

  setTimeout( () => {
      this.ckPlayerInit();
    },1000);

实现效果