vue项目中使用ckplayer.js封装视频播放组件

1、在index.html中引入ckplayer.js

<script src="ckplayer/ckplayer.js"  charset="utf-8"></script>

资源放在public路径下：

 点击视频播放按钮，弹框播放，效果图如下：如果需要支持进度条快进后退，后台接口需要使用断点续传

调用组件代码：

<!--组件调用示例-->
<template>
  <div>
    <div style="    margin-left: 20px;margin-top: 20px; ">
      <el-button @click="dialogVisible=true"  >视频播放</el-button>
    </div>
    <!--视频播放弹框-->
    <el-dialog   :visible.sync="dialogVisible" @close="closeVideo" title="视频播放"   width="50%"  top="4vh" :lock-scroll="false" :append-to-body="true"
                 :close-on-click-modal="false"  :show-close="true">
      <!--视频方式一  推荐-->
      <ckplayer-comp ref="videoComp" :poster="poster" :videoUrls="videoUrls" :autoPlay="autoPlay"></ckplayer-comp>
    </el-dialog>
  </div>
</template>

<script>
  import CkplayerComp from "../../components/videocompent/ckplayerComp";

  export default {
    name: 'home',
    components: {CkplayerComp},
    data() {
      return {  
        dialogVisible: false,
        compStyle:'width: 482px',
        size:'small',
        img: '',
        width: '50%',//视频弹框的宽度
        autoPlay: true,//视频打开是否自动播放
        poster: '',//视频封面图片
        videoUrls: [
          ['http://localhost:9999/sky-rxy-web/common/player', 'video/mp4', '进度条播放', 1],
          ['http://localhost:9999/sky-rxy-web/common/getVideo', 'video/mp4', '普通播放', 0]
        ] ,//视频地址
        sources:[{
          src: 'http://localhost:9999/sky-rxy-web/common/getVideo',  // 路径
          type: 'video/mp4'  // 类型
        }, {
          src: './test.webm',
          type: 'video/webm'
        }]
      }
    },
    computed: {},
    created() {

    },
    methods: {
      closeVideo() {
        //父组件调用子组件的方法
        this.$refs.videoComp.pauseVideo()
      }
    }
  }
</script>

 ckplayerComp.vue：

<!--ckplayer 视频播放-->
<template>
  <div id="video"></div>
</template>

<script>
  export default {
    name: 'ckplayerComp',
    props: ['videoUrls','autoPlay','poster'],
    data () {
      return {
        player: ''
      }
    },
    watch: {
      videoUrls: {
        handler(newVideoUrls, VideoUrls) {
          this.initVideo(newVideoUrls,this.autoPlay);
        },
        immediate: true
      }
    },
    mounted: function(){
      this.initVideo(this.videoUrls,this.autoPlay);
    },
    methods:{
      pauseVideo() {
        //暂停
        this.player.videoPause();
        // videoPause  playOrPause
      },
      initVideo(videoUrls,autoPlay) {
        // 挂载完成后进行
        var videoObject = {
          container: '#video', //容器的ID或className
          variable: 'player', //播放函数名称
          autoplay:autoPlay,//自动播放
          loaded: 'loadedHandler', //当播放器加载后执行的函数
          loop: false, //播放结束是否循环播放
          cktrack: '', //字幕文件
          poster: '', //封面图片
          preview: { //预览图片
            file: ['', ''],
            scale: 2
          },
          config: '', //指定配置函数
          debug: true, //是否开启调试模式
          drag: 'start', //拖动的属性
          seek: 0, //默认跳转的时间
          // promptSpot: [ //提示点
          //   {
          //     words: '提示点文字01',
          //     time: 30
          //   },
          //   {
          //     words: '提示点文字02',
          //     time: 150
          //   }
          // ],
          video: videoUrls
        };
        // 定义一个对象
        var player = new ckplayer(videoObject);
        this.player = player;
      }
    }
  }
</script>