标签：href htm angular 容器 als oca targe 编写 自动播放
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视频直播流
标签：href htm angular 容器 als oca targe 编写 自动播放
原文地址：https://www.cnblogs.com/smilebai/p/9169048.html
