angular2或angular4中使用ckplayer播放rtmp和m3u…

2018-06-24 02:27:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:课时11.HTML基本机构详解(掌握)

下一篇:课时75.并集选择器(掌握)