我在这个项目中是使用的是mp4格式的播放文件
ckplayer插件官方网站地址:
https://www.ckplayer.com/manual/14.html#m54
<div class="video-wrap">
<div class="video" id="live-video">
</div>
</div>
methods: {
getLiveDetail(val) {
let _this = this
//重点1: 假设后台给我的是一个数组形式的视频播放路径
let pathArra = ["https://10.35.11.2/ciksa/aa.mp4 ", " https://10.35.11.2/ciksa/aa.mp4 "]
this.videoObject = {
container: '#live-video',
variable: ckUid,
autoplay: true,
loaded: `${ckUid}_loaded`,
video: pathArra[val]
}
this.player = ckTarget[ckUid] = new ckplayer(this.videoObject)
ckTarget.loaded = () => {
val++
// 注意2:在录播项目中,监听end不是这样写的,
// 在这个项目中,不能和录播一样监听end事件,监听不到,据说是因为播放器挂载在window下,与flash的区别。
ckTarget[ckUid].addListener('ended', function(){
if(val<pathArra.length){
_this.getLiveDetail(val)
}
})
}
}
},
created() {
//注意3:在这个生命周期写this.getLiveDetail(0)会失效,因为:在这个生命周期拿不到dom,无法生成播放器对象
},
mounted(){
this.getLiveDetail(0)
},