博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
rtmp直播视频流播放器(ckplayer)使用方法
阅读量:6586 次
发布时间:2019-06-24

本文共 1034 字,大约阅读时间需要 3 分钟。

摘要:

在我们编写项目时,也许会接触到一些视频的操作,普通视频流的话,例如Ogg、MPEG4、WebM这类后缀的文件,这几类文件都可以被h5的video标签解析,并不需要做解析操作,那么我们在项目中也会用到直播视频的格式,我在项目中就有涉及到直播的需求,是rtmp格式的直播视频流,起初我找了相关插件进行解析,有video.js插件包,还有ckplayer插件包,因为video.js没有深研究,所以使用的是ckpalyer,该插件能很好的解析rtmp格式的直播视频流,但是需要做一些配置;

第一步:下载:http://www.ckplayer.com/down/

该插件有两种下载方式,请自行选择;

第二步:在自己的项目中进行引入,前提需要将ckplayer包放到项目中,之后直接引入ckplayer.js文件即可,所有依赖关系都是通过ckplayer.js进行查找,所以只需引入这一个文件

第三步:在body中添加视频dom容器

第四步:实例化ckplayer(这里我的操作是写了一个函数,将配置参数放到了函数里,之后在进行实例化)

function video(className,url){
var videoObject = {
container: className,//“#”代表容器的ID,“.”或“”代表容器的class variable: 'player',//该属性必需设置,值等于下面的new chplayer()的对象 autoplay:true,//自动播放 live:true,//直播视频形式 mobileCkControls:false, video:url//视频地址 }; return videoObject; };
var player=new ckplayer("容器","rtmp格式地址");

截止目前,所有工作就已完毕,一个简单的直播功能就搭建好了,ckplayer中提供了很多视频配置,具体配置请参照官网(一般配置是去掉播放器的logo,这里我就拿这一个功能进行举例)

在ckplayer.js文件中,找到style配置参数,将style内部的loading和logo配置的部分代码注释掉就可以了

 

转载于:https://www.cnblogs.com/jiangze-blog/p/8981067.html

你可能感兴趣的文章
[LeetCode]Pow(x, n)
查看>>
响应式 获取数据
查看>>
如何处理DataFrame中缺失项
查看>>
window下git笔记
查看>>
数据挖掘十大经典算法 优劣势
查看>>
PCB上LED指示灯电流、电压总结
查看>>
点击按钮表单元素左右移动
查看>>
[CDQ分治][Treap][树状数组]Theresa与数据结构
查看>>
安卓开发环境配置及HelloWorld
查看>>
学习笔记4
查看>>
Ubuntu10.04下Linux内核编译的完整步骤
查看>>
越南FCK批量拿站
查看>>
使用@crossorgin注解解决跨域问题
查看>>
Selenium 详解xpath定位
查看>>
网页做复制功能
查看>>
hibernate的crud操作
查看>>
Node.js调用mysql的存储过程
查看>>
IOS判断用户的网络类型(2/3/4G、wifi)
查看>>
PHP中如何对二维数组按某个键值进行排序
查看>>
SharePoint 2013 EventHanlder工具
查看>>