ckplayer---vue

1、下載ckplayer.zip包

http://www.ckplayer.com/down/

2、解壓把ckplayer放進vue的static下

3、index.html引入ckplayer.js

<script src="static/ckplayer/ckplayer.js"></script>

4、組件簡單頁面使用

html：

<div class="video active" style="width: 300px;height: 300px" id="ckplayera"></div>

<div class="video active" style="width: 300px;height: 300px" id="ckplayerb"></div>

script： 

methods:

ckplayera () {
  setTimeout(function () {
    var videoObject = {
      container: '#ckplayera',  // 容器的ID或className
      variable: 'player1',  // 播放函數名稱 與下面一致
      autoplay: true,   // 是否自動播放
      live: true,  // 是否是直播視頻 true = 直播，false = 點播
      mobileCkControls: false,  // 是否在移動端（包括ios）環境中顯示控制
      video: 'http://hls01open.ys7.com/openlive/3c417b6d4.m3u8'  // hls地址
    }
    let player1 = new ckplayer(videoObject)
  }, 2)
},
ckplayerb () {
  console.log('rtmp')
  setTimeout(function () {
    var videoObjects = {
      container: '#ckplayerb',
      variable: 'player2',
      autoplay: true,
      live: true,
      mobileCkControls: false,
      video: 'rtmp://rtmp01open.ys7.com/openlive/3c417bd16df54d26bb77240b04b8e6d4'  // trmp
    }
    let player2 = new ckplayer(videoObjects)
  }, 2)
}

 

created () {
  this.ckplayera()
  this.ckplayerb()
}