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