<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: '', // 发送跨域信息，示例：Anonymousplaybackrate: 1, // 默认倍速next: {click: () => {_this.$nextTick(() => {_this.handleNextPath()})}// link:''},// ended: null, // 结束显示的内容webFull: _this.webFull, // 是否启用页面全屏按钮，默认不启用controls: false, // 是否显示自带控制栏timeScheduleAdjust: 1, // 是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动logo: '', // logotitle: '', // 视频标题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>