angular2或angular4中使用ckplayer播放rtmp和m3u8视频直播流
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视频直播流的更多相关文章
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
- EasyDSS RTMP流媒体服务器中调用videojs播放rtmp视频显示在左上角问题
本文转自EasyDarwin团队成员Penggy的博客:http://www.jianshu.com/p/f63f5b7c691b 问题描述: 近期我开发了一款新一代的RTMP/HLS流媒体服务器软件 ...
- 使用 nginx 和 rtmp 插件搭建视频直播和点播服务器
使用 nginx 和 rtmp 模块 ,可以很容易地搭建一个视频直播和点播服务器出来. 首先,看一下最经典的参考文献: How to set up your own private RTMP serv ...
- angular中使用ckplayer播放器
原文地址:https://www.cnblogs.com/jying/p/9519557.html ,转载请说明出处. ckplayer官网:http://www.ckplayer.com 使用ckp ...
- 使用ckplayer搭建rtmp视频直播应用
视频直播才有的是RTMP协议进行视频实时流传输,在这里我们用到的软件都是 adobe 公司的一个是:Flash Media Server4 另一个是flash media live encoder 这 ...
- QT | 聊聊QT与直播流播放——从QMediaPlayer到Qt-AV
[原创文章,转载请注明来源,方便查看本文更新] 这段时间需要用QT开发一个播放直播流的功能,能够播放各种格式的直播流,并且CPU占用率不要太高(可以占用GPU),这些是我们的目标. 直播流推流的技术进 ...
- 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
- 使用video.js 7在html中播放rtmp视频流
1.背景 最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播. 经查询,了解到可以用ckplayer(有许可条款)和video ...
- 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流
http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...
随机推荐
- Maven 安装与使用(一)
1. 安装 参考:http://maven.apache.org/install.html A. win7环境下,官网下载maven安装文件 B. 解压缩maven文件 C. 确认已配置好JAVA环境 ...
- mongodb 3.4复制搭建
mongodb数据库主从复制的原理:在主从结构中,主节点的操作记录称为oplog(operation log).oplog存储在一个系统数据库local的集合oplog.$main中,这个集合的每个文 ...
- 学会利用Ionic官网文档
和任何新技术一样,ionic也提供了详细的官方文档说明.网址如下: http://ionicframework.com/docs/ 学会使用ionic控件 ionic提供了大量优秀的高性能的仿原生控件 ...
- Retrofit-入门使用
1. 在模块目录下的build.gradle dependencies { compile "com.squareup.retrofit2:retrofit:2.1.0" comp ...
- 如何使用Adobe Reader复制PDF文档上的文字
PDF文档大家常用,但是有没有简单的方法能够提取PDF文档上的文字,然后使用呢?除了将PDF转换成Word,这里介绍一种更为简单实用的方法复制PDF文本文字,Adobe Reader是大家都常用的PD ...
- MacOS上好用的软件
持续补充中…… 记录一些除了MacOS(Sierra)自带工具外,其他好用的软件. 截屏软件 Jietu——在AppStore中查找“Jietu”就可以找到这款软件.这是腾讯出品的一款用于MacOS系 ...
- C/C++ 合法整数与字符
一.C语言中的合法整型 首先C语言中的整型有三种表示方式:十进制.八进制和十六进制.(C语言中没有表示二进制的整型) 十进制: 如 int a = 63; //一个正常的整型 八进制: 如果想用8进制 ...
- February 12 2017 Week 7 Sunday
There is no place like home. 任何地方都不能与家相提并论. After tens of years roving outside the hometown, I sudde ...
- python UI自动化实战记录九:添加日志
想知道测试脚本运行到了哪一步,在脚本内关键节点处打日志是一个很好的方法.目前只写最简单的方式,logging相关还需要继续深入. 1 引包,并配置info级别以上的都显示 import loggin ...
- SVG基本图形
SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML ...