2020-11-26

pc或h5中使用ckplayer.js播放直播流rtmp，

1.下载：https://www.ckplayer.com/down/

下载后只需要ckplayer文件，文件大致内容为：

2.然后将ckplayer文件夹整体放到项目中

例如：

1)  vue中在index.html中引入

 <script src="ckplayer/ckplayer.js"></script>   src:ckplayer文件所在路径

2) h5,原生在所需用的页面调用

 <script src="ckplayer/ckplayer.js"></script>  src:ckplayer文件所在路径

3.使用

1) vue中使用，

html:  <div id="video" style="width: 100%; height: 100%"></div>

js:  在data中定义：videoObject，格式为下：

 videoObject: {

        width: "100%", // 宽度

        height: "100%", // 高度

        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class

        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象

        autoplay: true, //自动播放

        live: true,//是否为直播

        video: "", //视频地址(必填)  rtmp://58.200.131.2:1935/livetv/cctv1(cctv1公网测试地址)

      },

//参数属性参考官网，根据所需，上面只是一部分

在mounted或者created直接调用，  var player=new ckplayer(this.videoObject);

或者在所需的函数中调用:   例：

test(item){

  this.videoObject.video =  item.url;//地址为rtmp直播流地址

 var player=new ckplayer(this.videoObject);

}

2）  在html中使用

html:  <div id="video" style="width: 100%; height: 100%"></div>

js:  var  videoObject = {

        width: "100%", // 宽度

        height: "100%", // 高度

        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class

        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象

        autoplay: true, //自动播放

        live: true,

        video: "", //视频地址(必填)

      },

 var player=new ckplayer(videoObject);

或者也可封装为函数，自由发挥