react项目中集成ckplayer播放器插件

最新推荐文章于 2024-09-13 21:56:19 发布

原创最新推荐文章于 2024-09-13 21:56:19 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

react 同时被 2 个专栏收录

7 篇文章

订阅专栏

视频播放

7 篇文章

订阅专栏

本文档详细介绍了如何将CKPlayer播放器应用于Web页面，以播放公司摄像头监控视频。步骤包括下载CKPlayer包，将其放入项目公共文件夹，引入到HTML模板，设置播放器容器，并在组件挂载后初始化播放。通过设置变量和配置项，成功实现了视频播放功能。

最近在学习ckplayer播放器，想把它用于web上播放公司的摄像头监控视频。下面记录一下
1、下载ckplayer包下载地址
2、把下载后的包解压后把ckplayer文件夹及里面的内容一起复制到需要集成项目的公共文件下，我这里的项目配置的公共文件夹为public
在这里插入图片描述

3、在项目的入口index.html模板文件下引入

  <script type="text/javascript" src="%PUBLIC_URL%/ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>

注意这里的%PUBLIC_URL%/不可以忽略。
4、避免ckplayer当做ckplayer is not defined，需要在index.html文件中还要赋值给window，才可以在组件中使用。

window.onload = function () {
        window.ckplayer = ckplayer;
    }

5、设置节点容器播放视频

//定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
      container: '.videoPlayer', //“#”代表容器的ID，“.”或“”代表容器的class
      variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
      autoplay: true,
      live: true,
      debug: true,
      flashplayer: false,
      html5m3u8: true,
      video: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',//CCTV1高清
      };
      var player = new window.ckplayer(videoObject);//初始化播放器

我这里是直接把这段直接写在componentDidMount(){}中，直接组件挂载完后就播放。
render中设置播放容器

<div className="videoPlayer" style={{width: "600px", height: "400px"}} id="video"></div>

效果：在这里插入图片描述