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>