<template>
<div id="videoContainer" :class="videoContainer" style="width: 100%; height: 100%;">播放容器</div>
</template>
<script>
export default {
name: 'CkPlayerVideo',
inject: ['handleNextPath'],
props: {
videoContainer: {
// 视频容器
type: String,
default() {
return 'videoContainer' + Math.ceil(Math.random() * 100000)
}
},
autoPlay: {
// 自动播放
type: Boolean,
default() {
return false
}
},
loop: {
// 循环播放
type: Boolean,
default() {
return false
}
},
webFull: {
// 是否启用页面全屏
type: Boolean,
default() {
return true
}
},
barHideTime: {
// 控制栏隐藏时间
type: Number,
default() {
return 1500
}
}
},
data() {
return {
player: null // 播放器
}
},
mounted() {},
methods: {
initPlayer: function(videoUrl, videoCoverPic, nextUrl) {
const _this = this
// 调用开始
var videoObject = {
container: '.' + _this.videoContainer, // 视频容器
autoplay: _this.autoPlay, // 是否自动播放
loop: _this.loop, // 是否需要循环播放/**/
seek: 0, // 默认需要跳转的秒数
loaded: '', // 加载播放器后调用的函数
crossOrigin: '', // 发送跨域信息,示例:Anonymous
playbackrate: 1, // 默认倍速
next: {
click: () => {
_this.$nextTick(() => {
_this.handleNextPath()
})
}
// link:''
},
// ended: null, // 结束显示的内容
webFull: _this.webFull, // 是否启用页面全屏按钮,默认不启用
controls: false, // 是否显示自带控制栏
timeScheduleAdjust: 1, // 是否可调节播放进度,0不启用,1是启用,2是只能前进(向右拖动),3是只能后退,4是只能前进但能回到第一次拖动时的位置,5是看过的地方可以随意拖动
logo: '', // logo
title: '', // 视频标题
barHideTime: _this.barHideTime, // 控制栏隐藏时间
playbackrateOpen: true, // 是否开启控制栏倍速选项
playbackrateList: [0.75, 1, 1.25, 1.5, 2, 4], // 倍速配置值
cookie: null, // cookie名称,在同一域中请保持唯一
domain: null, // cookie保存域
cookiePath: '/', // cookie保存路径
documentFocusPause: true, // 窗口失去焦点后暂停播放
poster: videoCoverPic, // 封面图片 './js/video/poster.png',
video: videoUrl // 视频地址 https://vod.pule.com/6c992c3bvodcq1500003583/e9d289485285890813785221405/f0.mp4
}
// eslint-disable-next-line
_this.player = new ckplayer(videoObject) // 调用播放器并赋值给变量player
// 可以实现自动下一集 但全屏时候自动下一集时候会退出全屏
_this.player.ended(function() {
_this.$nextTick(() => {
_this.handleNextPath()
})
})
}
}
}
</script>
<style scoped></style>
ckplayer播放器自动播放下一集以及点击下一集
于 2022-07-18 11:55:01 首次发布