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

最近在学习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，“.”或“”代表容器的classvariable: '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>

效果：

react项目中集成ckplayer播放器插件相关推荐

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
WordPress集成ckplayer播放器教程
WordPress免插件集成CKPlayer播放器,首先在ckplayer官网下载资源包,将ckplayer文件夹放入所使用主题里(确保wp-content/themes/motheme/ckplay ...
直播页面5：项目中的直播播放器框架GSYVideoPlayer
直播页面5:项目中的直播播放器框架GSYVideoPlayer 一.github地址二.代码 0.快手官网获得直播地址 1.xml布局 2.java代码一.github地址 https://git ...
弹幕播放器【在项目中对弹幕播放器一些零碎的整理】
2019独角兽企业重金招聘Python工程师标准>>> 项目地址: https://github.com/Bilibili/DanmakuFlameMaster DanmakuFla ...
Vue中使用Ckplayer播放器
1.官方下载地址:http://www.ckplayer.com/down/ 下载最新的即可. 2.解压后可以看到 ckplayer这个目录,将它复制到项目中的static目录下. 3.在index. ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
JPlayer播放器插件教程，JPlayer项目实战
JPlayer 播放器:基于HTML5/Flash的音频.视频播放器. 项目预览:播放器插件预览 jPlayer中文官方文档:官网功能强大,操作简便,支持换肤功能. 引入JPlayer文件以及样式: ...
hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...

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

react项目中集成ckplayer播放器插件相关推荐

最新文章

热门文章