vue项目视频播放ckplayer使用

Cool_so_cool

已于 2024-04-01 19:10:40 修改

阅读量1.3k

点赞数 6

分类专栏：工作中遇到的问题文章标签： vue.js 前端 javascript

于 2024-04-01 19:09:40 首次发布

本文链接：https://blog.youkuaiyun.com/Cool_so_cool/article/details/137243229

版权

工作中遇到的问题专栏收录该内容

52 篇文章

订阅专栏

本文介绍了如何从ckplayer官网下载非npm插件的最新X3版本安装包，将其解压并引入项目，集成到HTML模板中，以及如何初始化和监听视频播放的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ckplayer 官方网址，点击访问

1，打开网页后能看到这里，我现在使用的是最新 X3版手册

在这里插入图片描述

2，这个ckplayer不是npm 插件，要下载安装包解压到项目里面使用

安装包网址通过gitee下载
在这里插入图片描述

3，解析安装包到项目中 public文件夹下面，在index.html下引入

在这里插入图片描述

4，在项目中使用

<template>
    <div class="video-container">
      <div class="video" style="width: 100%;height:100%;"></div>
      <p id="state"></p>
    </div>
  
  </template>

 mounted() {
      //定义一个变量：videoObject，用来做为视频初始化配置
      var videoObject = {
        container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
        video: 'http:视频地址.mp4'//视频地址
      };
      var player = new ckplayer();//初始化播放器
      player.add(videoObject);//
      }
      player.play(function () {
          document.getElementById('state').innerHTML = '监听到播放';
      });
    }

一个初始化的视频安装完毕