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

原文地址:https://www.cnblogs.com/smilebai/p/9169048.html

时间: 2024-10-12 11:53:21

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

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

使用 nginx 和 rtmp 模块 ,可以很容易地搭建一个视频直播和点播服务器出来. 首先,看一下最经典的参考文献: How to set up your own private RTMP server using nginx 1. 安装 nginx 和 rtmp 模块 有关 nginx 的编译和安装比较简单,这里就不介绍了,看参考文献.这里提示以下几点: (1) 安装好 nginx 后,配置文件在这里: /usr/local/nginx/conf/nginx.conf (2) 启动 ngin

网页全终端视频流媒体播放器EasyPlayer之使用 nginx 和 rtmp 插件搭建视频直播和点播服务器

使用 nginx 和 rtmp 模块 ,可以很容易地搭建一个视频直播和点播服务器出来.下面我们来看一下具体实施步骤: 1. 安装 nginx 和 rtmp 模块 有关 nginx 的编译和安装比较简单,这里就不介绍了,看参考文献.这里提示以下几点: (1) 安装好 nginx 后,配置文件在这里: /usr/local/nginx/conf/nginx.conf(2) 启动 nginx 的命令: $ sudo /usr/local/nginx/sbin/nginx -s stop $ sudo

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

视频直播才有的是RTMP协议进行视频实时流传输,在这里我们用到的软件都是 adobe 公司的一个是:Flash Media Server4 另一个是flash media live encoder 这两个软件的下载地址:http://pan.baidu.com/share/link?shareid=256521&uk=1711305891 Flash Media Server4 的安装与搭建见:使用ckplayer和fms搭建rtmp视频应用  连接:http://www.ckplayer.co

RTMP、RTSP、HTTP视频协议详解(附:直播流地址、播放软件)

一.RTMP.RTSP.HTTP协议 这三个协议都属于互联网 TCP/IP 五层体系结构中应用层的协议.理论上这三种都可以用来做视频直播或点播.但通常来说,直播一般用 RTMP.RTSP.而点播用 HTTP.下面分别介绍下三者的特点. 1,RTMP协议 (1)是流媒体协议. (2)RTMP协议是 Adobe 的私有协议,未完全公开. (3)RTMP协议一般传输的是 flv,f4v 格式流. (4)RTMP一般在 TCP 1个通道上传输命令和数据. 2,RTSP协议 (1)是流媒体协议. (2)R

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

前面几章讲解了使用nginx-rtmp搭建直播流媒体服务器,以及使用ffmpeg推流到nginx-rtmp服务器,java通过命令行调用ffmpeg实现推流服务,后端的事情到这里就已经全部完成了. 本章讲一下播放器的选用和二次开发,前端的播放器虽然有flex(flash)可以用,但是很遗憾flex接触的并不多,学习成本又太高,那么基于第三方开源的flash播放器二次开发就显得很有必要. 一.几种播放器选择 那么播放器,哪些已经不再更新的和收费的,这里不会介绍,只介绍两种轻量级的开源播放器. 1.

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

前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流,再到nginx-rtmp发布流,后端的服务到这里就已经全部完成了. 如果这里的流程没走通,那么这里的播放器也是没办法播放实时流的. 本章讲一下播放器的选用和二次开发,前端的播放器虽然有flex(flash)可以用,但是很遗憾flex接触的并不多,学习成本又太高,那么基于第三方开源的flash播放器二

video.js播放rtmp

项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 尝试修改源码,发现他的前端js和后端flash都没有交互,没写过as,分享大,又太耗时,果断pass... jwplayer rtmp播放好像也是要商业授权,最后选用了video.js 下载地址:https://github.com/videojs/video.js/releases 发现 V6.X

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

http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转一个 rtmp 流. 浏览器中使用 node-rtmpapi 解析 RTMP 协议,完成握手和通信. 提取其中的 H264 视频流 发送给 Broadway 解码 Repo: https://github.com/yingDev/Web-Rtmp 目前只是一个 demo 级别的东西, 算是验证了可行

Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端,本地在进行拉流播放的流程.所以这个过程中,我们需要首先来把服务端这个中间环节的工作搞定,后续再弄推流和拉流功能.现在推流大部分都是使用RTMP/HLS协议的,关于这两个协议的区别: 所以我们服务端搭建就需要用这两个协议,不过本文放心了,不会去手动的编写一套协议代码的,谁叫这个世界属于开源呢? 需要的