1.下载ckplayer整个包并导入
将ckplayer放到src/assets文件夹下
2.引入ckplayer
在跟文件夹下找到angular,json文件中的script添加ckplayer.js
"scripts":[
"./src/assets/ckplayer/ckplayer.js"
]
3.编写html文件
<div id="video" class="video"></div>
4.在初始化的时候首先要声明：
player:any
5.编写实现的函数 在 组件名.component.ts中
videoPlayer(){
var videoObject = {
container:'video',
variable:'player',
autoplay:false,
video:[
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
]//视频地址
};
this.player = new ckplayer(videoObject);
}
6.ckplayer 一直有波浪线需要将ckplayer声明一下，在src文件下找typings.d.ts文件(没有就建一个) 加入：
declare var ckplayer: any;
7.将ckplayer文件夹中的几个文件拷贝到src文件夹下：
ckplayer.swf、style.xml、language.xml、m3u8.swf
8.在angular.json文件中的assets中再添加几项配置：
"assets":[
"src/favicon.ico",//原有的
"src/assets",//原有的
"src/ckplayer.swf",//添加的
"src/language.xml",//添加的
"src/style.xml",//添加的
"src/m3u8.swf",//添加的
]
9.配置完毕之后就重新启动一下
ng serve