zoukankan      html  css  js  c++  java
  • angular中引入视频播放插件ckplayer

    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

  • 相关阅读:
    机器视觉-halcon学习笔记1
    c#桌面窗体软件【学习笔记】
    Csharp学习笔记 重载
    unity学习笔记——第一人称
    Csharp学习笔记_kita (第二天)namespace
    try ,catch ,finally执行流程
    开发之统一异常处理
    git开发日常使用总结
    mysql5.7绿色版配置以及找不到 mysql服务问题解决
    正则表达式,将数据库字段转换为驼峰式
  • 原文地址:https://www.cnblogs.com/violinh/p/12163080.html
Copyright © 2011-2022 走看看