资源管理系统-VUE使用ckplayer实现视频列表播放

最新推荐文章于 2024-08-23 17:48:30 发布

置顶

STIll_clx

最新推荐文章于 2024-08-23 17:48:30 发布

阅读量2.1k

点赞数 1

分类专栏：前端资源管理系统权限管理文章标签： vue javascript js

本文链接：https://blog.csdn.net/STIll_ly/article/details/108342856

版权

本文介绍了如何在Vue项目中集成CKPlayer视频播放器，包括下载插件、引入静态资源、创建Vue组件、数据加载及效果展示，并提供了项目演示和GitHub源码链接。

摘要由CSDN通过智能技术生成

一、下载ckplayer插件

官网地址：http://www.ckplayer.com/down/
在这里插入图片描述

二、加压后将ckplayer放进VUE项目的static目录下：

在这里插入图片描述

三、在index.html中引入ckplayer.js文件

<script src="./static/ckplayer/ckplayer.js"></script>

四、创建VUE组件

<template>
  <div id="video"></div>
</template>

<script>
  export default {
    name: 'ckplayer',
    props: ['videoUrls','autoPlay','poster','loop'],
    data () {
      return {
        player: ''
      }
    },
    watch: {
      videoUrls: {
        handler(newVideoUrls, VideoUrls) {
          this.initVideo(newVideoUrls,this.autoPlay);
        },
        immediate: true
      }
    },
    mounted: function(){
      this.initVideo(this.videoUrls,this.autoPlay);
    },
    methods:{
      initVideo(videoUrls,autoPlay) {
        // 挂载完成后进行
        var videoObject = {
          container: '#video',