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()}

 

来源：https://www.cnblogs.com/luckyShuang/p/11394893.html