ckplayer播放器自动播放下一集以及点击下一集

<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>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值