1. 下载ckpalyer整个包并导入,

将ckplayer放到src/assets/下

2. 引入ckplayer.js

angular2中,在angular-cli.json中找到script,添加上ckplayer.js

"scripts": ["./assets/ckplayer/ckplayer.js"]

3. 编写html

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

4. 编写实现函数

videoPlay(){
var videoObject = {
container: '#video',//“#”代表容器的ID,“.”或“”代表容器的class
variable: 'player',//该属性必需设置,值等于下面的new chplayer()的对象
autoplay: false,//自动播放
live: true,
poster: 'material/poster.jpg',//视频封面
video:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//视频地址
};
player = new ckplayer(videoObject);
}

5.调试程序中的报错,player这里,先声明

player: any;

然后在videoPlayer函数中将最后一行的ckplayer加上this

this.player = new ckplayer(videoObject);

6. 最后发现ckplayer一直有波浪线,同时还有报错,此时需要将ckplaer进行declare一下,找到src目录下的typings.d.ts,加入以下代码

declare var ckplayer: any;

6.调试浏览器中的报错
此时程序中不再有报错了,但是打开网页发现视频仍然不能播放,在console栏中看到

localhost:4200/ckplayer.swf 404

发现他直接找了根目录下的插件,而angular2/4运行的根目录在src下面,所以就将刚才的ckplayer中的几个相关文件拷贝到src目录下,我只拷贝了其中3个:

ckplayer.swf,style.xml,language.xml,m3u8.swf
这里如果你只播放rtmp就不用把m3u8复制过来了

"assets": [
"assets",
"favicon.ico",
"favicon.png",
"ckplayer.swf",
"language.xml",
"style.xml"]

7. 重新运行一下,是不是发现大功告诉成了呢。

ng serve

8. 完整程序github地址:

https://github.com/bainana/angular-ckplayer-demo

angular2或angular4中使用ckplayer播放rtmp和m3u8视频直播流的更多相关文章

  1. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流

    背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...

  2. EasyDSS RTMP流媒体服务器中调用videojs播放rtmp视频显示在左上角问题

    本文转自EasyDarwin团队成员Penggy的博客:http://www.jianshu.com/p/f63f5b7c691b 问题描述: 近期我开发了一款新一代的RTMP/HLS流媒体服务器软件 ...

  3. 使用 nginx 和 rtmp 插件搭建视频直播和点播服务器

    使用 nginx 和 rtmp 模块 ,可以很容易地搭建一个视频直播和点播服务器出来. 首先,看一下最经典的参考文献: How to set up your own private RTMP serv ...

  4. angular中使用ckplayer播放器

    原文地址:https://www.cnblogs.com/jying/p/9519557.html ,转载请说明出处. ckplayer官网:http://www.ckplayer.com 使用ckp ...

  5. 使用ckplayer搭建rtmp视频直播应用

    视频直播才有的是RTMP协议进行视频实时流传输,在这里我们用到的软件都是 adobe 公司的一个是:Flash Media Server4 另一个是flash media live encoder 这 ...

  6. QT | 聊聊QT与直播流播放——从QMediaPlayer到Qt-AV

    [原创文章,转载请注明来源,方便查看本文更新] 这段时间需要用QT开发一个播放直播流的功能,能够播放各种格式的直播流,并且CPU占用率不要太高(可以占用GPU),这些是我们的目标. 直播流推流的技术进 ...

  7. 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

    前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...

  8. 使用video.js 7在html中播放rtmp视频流

    1.背景 最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播. 经查询,了解到可以用ckplayer(有许可条款)和video ...

  9. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

随机推荐

  1. andriod导入v4包导致的错误

    最近升级android studio到版本3.0.1后,想要使用FragmentActivity这个类,导入v4包,发现R文件报错了,也就是找不到的意思. 如图:导包 此时选中v4包导进去. 确定之后 ...

  2. canvas.addEventListener()

    对 canvas 元素的事件监听用addEventListener()实现, 但是有一点缺陷是:canvas 不支持键盘事件,为了解决这个问题,可以采用以下两种方案: 方案一: key event - ...

  3. Android学习——BroadCast(二)

    这篇博文介绍有序广播的使用 有序广播的发送 和普通广播完全相同,只需要更换发送的方式即可 ordered.setOnClickListener(new View.OnClickListener() { ...

  4. 从Microsoft SQL Server迁移到MySQL指南

    转自 https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 由于 MySQL 将节约成本.自由选择平台.特性丰富等优 ...

  5. javascript tips and snippets

    如何给javascript对象动态创建动态key // ES2015 var key = 'DYNAMIC_KEY', obj = { [key]: 'ES6!' }; console.log(obj ...

  6. C# Request获取URL常见用法

    如果测试的url地址是http://www.test.com/testweb/default.aspx, 结果如下: Request.ApplicationPath: /testweb Request ...

  7. cocos2d-x 3.1 编译脚本android-build.py

    写在前面: 前段时间下载了cocos2d-x 3.1,按照官网的教程,配置环境,编译打包,走了一遍,感觉不错,顺便发现其中用了很多python的脚本文件,比如今天要说的android-build.py ...

  8. Linux:CentOS7卸载mysql

    步骤 方法一. 1.查看mysql安装 rpm -qa|grep -i mysql 2.卸载前关闭mysql服务 rpm -ev --nodeps mysql-community-release-el ...

  9. SqlParameter.Value = NULL 引发的数据库异常

    摘自:http://www.cnblogs.com/ccweb/p/3403492.html using (SqlCommand cmd = new SqlCommand()) { cmd.Conne ...

  10. CodeIgniter框架学习要点

    以下内容从兄弟连的CI教学视频中摘抄: http://codeigniter.org.cn/tutorials/ ------------------------------------------- ...