首页 > 其他 > 详细

angular中引入视频播放插件ckplayer

时间:2020-01-07 19:13:54      阅读:425      评论:0      收藏:0      [点我收藏+]

1.下载ckplayer整个包并导入

  将ckplayer放到src/assets文件夹下

2.引入ckplayer

在跟文件夹下找到angular,json文件中的script添加ckplayer.js

  "script":[

    "./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

angular中引入视频播放插件ckplayer

原文:https://www.cnblogs.com/violinh/p/12163080.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!