react中index中引入ckplayer播放器

1. 下載包到本地

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

將包解壓放於public文件夾下

3. index.html中引入ckplayer.js

在body標籤下添加

// ckplayer.js的地址
<script src="%PUBLIC_URL%/ckplayer/ckplayer/ckplayer.js"></script>
 window.onload = function () {
      /*這裏是重點，create-react-app 默認開啓eslint,不影響eslint的使用情況下，需要定義全局變量接受，否則被報ckplayer is not defined 的錯誤*/
        window.ckplayer = 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生命週期進行調用

      this.ckPlayerInit();

重新播放視頻源 都需將this.ckPlayerInit()方法進行調用

實現效果