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

總結

以上是生活随笔為你收集整理的ckplayer---vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。