ckplayer---vue
1、下载ckplayer.zip包
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()
}