超酷的开源H5视频播放器CKplayer

文章最后更新时间：2024年05月30日

Ckplayer

CKplayer简介

CKplayer是一款超酷的H5视频播放器，基于JavaScript和CSS，其特点是开源，功能强大，不依赖其它插件，二次开发简单方便。CKplayer遵守开源协议，协议类型为：MIT，需要获取协议详情内容请至：https://opensource.org/licenses/MIT，CKplayer用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格，DIY可玩性非常高。CKplayer播放器支持的视频格式：MP4、FLV、TS、M3U8、Webm等等。

CKplayer官网：https://www.ckplayer.com

CKplayer论坛：https://bbs.ckplayer.com/

CKplayer最新版本：X3 CKplayer-X3使用手册

CKplayer Demo

Demo HTML

<link rel="stylesheet" type="text/CSS" href="css/ckplayer.css">
<!-- ... -->
<div id="player"></div>
<!-- ... -->
<script type="text/JavaScript" src="js/HLS.min.js"></script>
<script type="text/javascript" src="js/flv.min.js"></script>
<script type="text/javascript" src="js/ckplayer.min.js"></script>

Demo JS

var videoObject = {
    container: '#player', //“#”代表容器的ID，“.”或“”代表容器的class
    autoplay: false,//自动播放
    logo:'static/logo.png',//LOGO
    loop: false,//循环播放
    playbackrate: 1,//默认倍速
    menu:false,//右键菜单
    loaded: 'loadedHandler',
    rightBar:false,//是否开启右边控制栏
    smallWindows:true,//是否启用小窗口模式
    playbackrateOpen:true,//是否开启控制栏倍速选项
    playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
    plug:'HLS.js',//设置使用hls插件
    video:'https://xxx.com/2023/index.M3U8'//视频地址
};
		
var player=new ckplayer(videoObject);//初始化播放器

CKplayer 参数

<script type="text/javascript">
    var videoObject = {
        container: '',//视频容器的ID
	volume: 0.8,//默认音量，范围0-1
	poster: '',//封面图片地址
	autoplay: false,//是否自动播放
	loop: false,//是否需要循环播放
	rotate:0,//视频旋转角度
	zoom:0,//默认缩放比例
	live: false,//是否是直播
	ad:null,//广告
	backLive:false,//显示返回直播按钮
	seek: 0,//默认需要跳转的秒数
	next: null,//下一集按钮动作
	loaded: '',//加载播放器后调用的函数
	plug:'',//使用插件，目前支持hls.js:用于在pc端播放m3u8，flv.js:播放flv，mpegts.js：播放ts
	duration:0,//如果强制使用点播，而视频里不存在总时间，可以手动指定
	preview: null,//预览图片对象
	prompt: null,//提示点功能
	crossOrigin:'',//发送跨域信息，示例：Anonymous
	video: null,//视频地址
	type:'',//视频类型
	playbackrate: 1,//默认倍速
	ended:null,//结束显示的内容
	webFull:false,//是否启用页面全屏按钮，默认不启用
	theatre:null,//是否启用剧场模式按钮，默认不启用
	controls:false,//是否显示自带控制栏
	rightBar:null,//是否开启右边控制栏
	smallWindows:null,//是否启用小窗口模式
	smallWindowsDrag:true,//小窗口开启时是否可以拖动
	screenshot:false,//截图功能是否开启
	timeScheduleAdjust:1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
	logo:'',//logo
	menu:null,//右键菜单
	information:{//关于
		'Load:':'{loadTime} second',
		'Duration:':'{duration} second',
		'Size:':'{videoWidth}x{videoHeight}',
		'Volume:':'{volume}%',
		'Sudio decoded:':'{audioDecodedByteCount} Byte',
		'Video decoded:':'{videoDecodedByteCount} Byte'
	},
	track:null,//字幕
	title:'',//视频标题
	language:'',//语言包文件
	barHideTime:1500,//控制栏隐藏时间
	playbackrateOpen:true,//是否开启控制栏倍速选项
	playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
	Cookie:null,//Cookie名称，在同一域中请保持唯一
	domain:null,//cookie保存域
	cookiePath:'/',//cookie保存路径
	documentFocusPause:false,//窗口失去焦点后暂停播放
	mouseWheelVolume:2,//是否启用鼠标滚轮调节音量功能，0=不启用，1=启用，2=全屏时才启用
	keyVolume:2//是否启用键盘控制音量调节，0=不启用，1=启用，2=全屏时才启用
    };
    </script>

CKplayer控制API

play()//播放
pause()//暂停
playOrPause()//播放/暂停
muted()//静音
exitMuted()//取消静音
volume(num)//修改音量/获取音量
duration()//返回视频总时间
time()//获取当前播放时间
seek(time)//跳转指定时间点
loop(bool)//循环播放
full()//全屏
exitFull()//退出全屏
fullOrExit()//在全屏和退出全屏两个状态之间进行切换
webFull()//页面全屏
exitWebFull()//退出页面全屏
theatre()//剧场模式
exitTheatre()//退出剧场模式
fastBack(num)//快退
fastNext(num)//快进
bar(bool)//显示/隐藏底部(顶部)控制栏，bool:true=显示控制栏，false=隐藏控制栏
rightBar(bool)//显示/隐藏右边控制栏，bool:true=显示控制栏，false=隐藏控制栏    
screenshot()//截图并返回图片的base64
closeScreenshot(bool)//关闭截图窗口
smallWindows(bool)//开启小窗口功能，bool:true=开启小窗口，false=关闭小窗口功能
message(str)//在播放器中显示一个消息
closeFrontAd()//跳过贴片广告
fps()获取当前的fps
width()//获取播放器宽度
height()//获取播放器高度
videoWidth()//获取视频宽度
videoHeight()//获取视频高度
zoom(num)//调整视频的显示百分比 num=数字，只接受3种：100，75，50
rotate(num)//旋转视频的角度 num=数字，只接受4种：0，90，180，270
track(i)//切换字幕 i=字幕编号    
layer(obj,bar)//向播放器添加一个层
obj=1是可以直接定义页面已有的节点，如'.level'或'#level'
    2是可以动态添加层内容，此时obj为一个对象如{class:'.level',content:'内容'}
    bar=true添加在底部控制栏上，=false添加在播放器内

closeLayer(ele)//关闭指定层
backLive(bool)//显示/隐藏回到直播按钮 bool:true=显示，false=隐藏
playbackRate()//返回视频播放速度
definition(i)//切换清晰度 i=清晰度编号
cookie(name)//获取cookie记录 示例：player.cookie('cookiename')或者player.cookie()
remove()//卸载播放器 示例：player.remove()

addListener(name,callback)//播放器监听事件
示例：
var callBack=function(){console.log('监听到播放')};
player.addListener('play',callBack);//添加监听事件

removeListener(name,callback)//删除监听事件
示例：
var callBack=function(){console.log('监听到播放')};
player.addListener('play',callBack);//添加监听事件
player.removeListener('play',callBack);//删除上面添加的监听

vars(obj[.value])修改初始化变量
示例： player.vars('timeScheduleAdjust',0);//禁止鼠标拖动进度

CKplayer监听API

监听方式一：
<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		volume:0.8,//默认音量为0.8
		video:'temp.mp4'
	};
	var player=new ckplayer(videoObject);
	player.volume(function(num){
	    console.log('音量修改成：'+num);
	});
</script>

监听方式二：使用统一的监听函数addListener
<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		volume:0.8,//默认音量为0.8
		video:'temp.mp4'
	};
	var player=new ckplayer(videoObject);
	player.addListener('volume',function(num){
	    console.log('音量修改成：'+num);
	});
</script>

监听API列表
loadedMetaData//监听到元数据
函数说明：player.loadedMetaData(function(obj){//监听元数据，obj为一个对象，包含视频的宽高，总时间等信息});    

play//监听播放
函数说明：player.play(function(){//监听到播放});    

pause//监听暂停
函数说明：player.pause(function(){//监听到暂停});    

muted//监听静音/取消静音
函数说明：player.muted(function(bool){//bool=true，监听到静音，=false，监听到取消静音});

volume//监听音量改变
函数说明：player.volume(function(num){//num=音量});    

duration//监听到视频总时间
函数说明：player.duration(function(t){//t=当前视频总时间});    

time//监听播放时间
函数说明：player.time(function(t){//t=当前播放时间});    

seek//监听跳转    
函数说明：player.seek(function(obj){//obj['state']=跳转状态，有两个，分别是seeking和seekend，obj['time']=即将跳转的时间});    

buffer//监听跳转
函数说明：player.buffer(function(state){//state=start是开启缓冲，end=缓冲结束});    

loop//监听是否循环
函数说明：player.loop(function(bool){//bool=true，目前处于循环播放状态，=false，目前处于非循环播放状态});    

playback//监听倍速播放速度被修改了
函数说明：player.playback(function(num){//num=当前倍速});    

playbackRate//监听倍速播放速度被修改了
函数说明：player.playbackRate(function(num){//num=当前倍速});    

track//监听清晰度被修改了
函数说明：player.track(function(obj){//obj=一个对象，切换的视频});    

fps//监听当前fps
函数说明：player.fps(function(num){//num=fps});

ended//监听播放结束
函数说明：player.ended(function(){//视频播放已结束});    

error//监听视频播放出错
函数说明：player.error(function(obj){//监听到错误，obj=错误内容});    

full//监听全屏状态
函数说明：player.full(function(bool){//bool=true，全屏状态，=false，普通状态});    

webFull//监听页面全屏状态
函数说明：player.webFull(function(bool){//bool=true，页面全屏状态，=false，普通状态});    

theatre//监听剧场模式状态
函数说明：player.theatre(function(bool){//bool=true，剧场模式，=false，普通状态});    

smallWindows//监听是否开启了小窗口    
函数说明：player.smallWindows(function(bool){//bool=true，开启了小窗口模式，=false，普通状态});    

screenshot//监听截图
函数说明：player.screenshot(function(obj){//obj=截图相关信息});    

backLive//监听到用户点击了“返回直播”按钮    
函数说明：player.backLive(function(){//监听成功});    

zoom//监听视频缩放比例
函数说明：player.zoom(function(num){//num=百分比});    

rotate//监听视频旋转角度
函数说明：player.rotate(function(num){//num=放置角度});   

mouseActive//监听鼠标是否活跃，如果活跃状态，则控制栏显示
函数说明：player.mouseActive(function(bool){//bool=true，活跃，=false，静止});    

visibilityState//监听页面当前是否获得焦点
函数说明：player.visibilityState(function(state){//state=show，页面标签当前处于显示状态，=hidden，页面标签当前处理隐藏状态});

CKplayer常见问题

#视频有声音，无画面，或有画面，无声音

这是视频转码格式不正确导致的，正确的视频格式应该是h.264编码。音频编码是AAC，这种现象正常会在flashplayer里出现，h5环境对对视频元数据和编码的兼容性更强一些。

#不能播放

一：视频能在迅雷等本地播放器里播放但不能在ckplayer里播放

因为本地播放器都集成了各种解码器，而且对视频的元数据信息没有要求在第一帧。而网页播放器对视频的要求必需是h.264编码的。如果你是其它编码，在本地有相应的解码器，当然可以播放，但在网页上就无法使用了。

二：mp4视频在安卓上能够播放，但在苹果上不能播放

引起这个问题的原因可能存在如下方面：

1：IIS安装了mod_h264_streaming.dll组件，有时这个组件会导致这个问题的出现，可以先试着禁用到

2：服务器安装了安全狗软件，先关掉（或卸载掉）后试试

3：检查防火墙，可以先关闭试试

三：视频没有播放结束，播放就停止了

造成这个的原因是由于视频本身存在问题。在转码过程中出现了错误导致提前结束。解决的办法是试着重新转码。

四：中文名称的路径/视频名称无法播放

首先，ckplayer是支持中文播放的。查看你的服务器编码是否为gbk或gb2312，具体设置方法请自行搜索。

所以，你需要进行以下测试：

1：如果你是本地视频地址，即服务器是你的，视频是你的，需要检查服务器是否支持该格式的视频，检查的方法是把视频地址放在地址栏里直接打开看看能否下载。如果不能下载，说明你的服务器不支持该格式的视频，可以参考帮助手册里的“视频和服务器配置”栏目了解帮助。

2：视频可以下载，但不能播放，需要确认该视频格式是h.264的编码。

3：如果你是通过网址（包括xml格式的地址），需要检查你的安全策略文件，如果你的根目录下不存在策略文件，请自行放置一个，安全策略文件示例，官方的下载包里提供了一个，名称是：crossdomain.xml，文件名称不能更改，详细的了解可以自己百度搜索。最安全的方法是用浏览器自带的开发者工具进行测试

#支持随意拖动的情况下不能按指定的秒数进行跳转

视频的跳转（seek）是根据关键帧进行跳转的，并不是按指定的秒数进行跳转，简单点说，一个视频关键帧列表可能是如下值

0秒，10秒，20秒，30秒

在这些秒数有关键帧，而其它秒是没有关键帧的

此时当跳转到15秒时，视频（播放器）会自动搜索最近的一个关键帧进行跳转，如10秒的关键帧，所以如果想要准确的跳转，关键帧的设置就要尽量小。正常转码软件里会有这方面的配置。

#m3u8的直播为什么循环播放/播放几秒就停止了

首先，需要了解一下，m3u8直播的原理：假设直接地址是live.m3u8该文件里的直播地址格式是

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:6
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:4.797000,
index0.ts
#EXTINF:4.396000,
index1.ts
#EXTINF:5.297000,
index2.ts

上面文件中的节点作用是：

#EXTM3U                     m3u文件头，必须放在第一行
#EXT-X-VERSION              版本号
#EXT-X-MEDIA-SEQUENCE       第一个TS分片的序列号
#EXT-X-TARGETDURATION       每个分片TS的最大的时长
#EXT-X-ALLOW-CACHE          是否允许cache
#EXT-X-ENDLIST              m3u8文件结束符
#EXTINF                     extra info，分片TS的信息，如时长，带宽等

当播放器第一次请求会加载这里的：index0.ts,index1.ts,index2.ts来播放，因为该m3u8里没有设置结束节点。所以播放器判断出该文件为直播文件，则在(#EXT-X-TARGETDURATION)设置的时间后重新加载live.m3u8，此时因为是直播，所以live.m3u8里应该会自动增加一个新的ts文件流，即live.m3u8变成如下的格式：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:6
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:4.797000,
index1.ts
#EXTINF:4.396000,
index2.ts
#EXTINF:5.297000,
index3.ts

从上面的可以看出，index0.ts没了，多了一个index3.ts。播放器会把index3.ts添加到播放列表里。这样循环下去。则会不停的进行直播的动作。

了解了以上的原理后。就容易分析原因了。

循环播放或播放一定时间后停止，都是因为播放器没有请求到新的ts文件导致。可能是使用了cdn缓存机制导致，或服务器端设置了缓存机制导致。

#地址里包含&符号的解决办法

当视频地址里包含&符号时，可以使用如下方法进行兼容。

1：将&转化成%26

2：将视频地址整体进行url编码。也就是：

video:encodeURIComponent('http://url/index.m3u8?a=1&b=2'),
unescape:true

使用方法一时要注意你的视频服务器要能够处理转码后的地址。

#播放m3u8时不能默认暂停的解决方法

因为m3u8有一个强制自动播放的功能。如果想默认暂停需要设置ckplayer.js或ckplayer.xml中搜索到autoLoad设置成false。