功能示例

#说明

功能设置的方式分成两种,一种是初始化播放器时进行设置,一种是在使用过程中通过js进行配置的修改。

#修改logo

该功能只能在初始化时进行配置,代码如下:

var videoObject = {
    ...
    logo:'images/logo.png',
    ...
}
new ckplayer(videoObject );

如需修改logo的位置,则需要修改样式css文件中的.ckplayer-ckplayer .ck-main .ck-logo{}

观看示例视频

视频容器

#修改loading

loading样式在css文件中修改,具体定义为:.ckplayer-ckplayer .ck-main .ck-loading{}

#修改右键

在调用播放器初始化时进行配置

var videoObject = {
    ...
    menu:[
	{
	    title:'ckplayer',
	    link:'http://www.ckplayer.com'			
	},
	{
	    title:'version:X3',
	    underline:true
	},
	{
	    title:'调用外部JS',
	    javascript:'hello'
	},
	{
	    title:'关于视频',
	    click:'aboutShow'
	}
    ]
    ...
}
new ckplayer(videoObject);
function hello(){
    alert('您好,朋友');
}

从上面代码中可以看出,右键菜单是以多个对象组成的数组形式进行配置,每个对象配置一行菜单。

对象属性说明:

title:菜单标题,必需

link:菜单链接地址:非必需

click:菜单单击触发内部事件,字符形式

javascript:菜单单击触发外部js,字符形式

underline:是否需要在当前菜单项下面显示间隔线

观看示例视频

视频容器

#点播

点播是ckplayer最基础的应用,只需要简单配置即可

var videoObject = {
    container: '.video', //容器的ID或className
    video:'demo.mp4'
}
new ckplayer(videoObject);

#直播

使用直播的方法很简单,只要在初始化时设置live:true

var videoObject = {
    container: '.video', //容器的ID或className
    live:true,//指定为直播
    plug:'hls.js',//使用hls.js插件播放m3u8
    video:'live.m3u8'//视频地址
}
new ckplayer(videoObject);

观看示例视频

视频容器

#直播+回看

直播+回看的原理:

1:初始化时设置live的值为直播开始时间戳,精确到毫秒(13位数字)。

2:监听seek动作,获取要回看的时间点,切换成点播

3:点播状态下初始化时显示“回到直播”按钮,并同时监听按钮点击事件

观看示例视频

视频容器

#使用hls.js插件播放m3u8

移动端播放m3u8不需要使用播放。

PC端播放m3u8需要使用hls.js插件,支持点播和直播

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'hls.js',//设置使用hls插件
				video:'/video/m3u8/index.m3u8'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频

视频容器

#使用flv.js播放flv文件

使用flv.js可以实现在多平台上播放flv格式视频,包含点播+直播

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/flv.js/flv.min.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'flv.js',//设置使用flv插件
				video:'/video/temp.flv'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看播放单个flv格式视频示例视频

视频容器

观看播放多段flv格式视频示例视频

视频容器

#使用mpegts插件播放ts

注意,播放ts,只能用于直播,不建议用于点播!

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="ckplayer/mpegts.js/mpegts.js"></script>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:'mpegts.js',//设置使用mpegts.js插件
				live:true,
				video:'/video/temp.ts'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频,由于没有ts直播源,本示例只演示对于ts格式的支持,并不是真正的直播

视频容器

#播放mpd格式视频

播放器初始化时属性plug不但可以配置固定的插件,还可以使用自定义的函数进行播放,本视频演示了使用dash.js进行视频播放的示例,需要使用该功能,需要自行下载dash.js相关文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>播放mpd-ckplayer</title>
		<link rel="stylesheet" type="text/css" href="/public/static/ckplayer-x3/css/ckplayer.css">
		<script type="text/javascript" src="/public/static/ckplayer-x3/js/ckplayer.js"></script>
		<script type="text/javascript" src="/public/static/ckplayer-x3/dash.js/dash.all.min.js"></script>
		<div class="video"></div>
		<script>
			function dashPlayer(video,fileUrl){
				video.attr('data-dashjs-player',' ');
				video.attr('src',fileUrl);
			}
			var videoObject = {
				container: '.video', //容器的ID或className
				plug:dashPlayer,//使用自定义的形式播放视频
				video:'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mpd/default/1.mpd'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例

视频容器

#贴片广告

贴片广告的定义需要在初始化时进行。

方法是首先定义广告属性ad,ad的类型是object,ad里可以定义两个属性:front和pause,分别代表贴片广告和暂停广告。

front类型为object,可以定义贴片广告是否启用关闭广告按钮,显示关闭广告按钮的时间等属性,具体可以看下方的示例

观看贴片广告示例视频

视频容器

#暂停广告

暂停广告需要在初始化时进行配置。

观看示例视频

视频容器

#切换语言

使用其它语言包有两种方法:

1:在页面顶部引入语言包文件(js文件)

2:在初始化时配置语言包,具体可查看language文件下的文件名

两种形式的代码如下:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
		<script type="text/javascript" src="ckplayer/language/en.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				video:'website:../video.json'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
		<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
	</head>
	<body>
		<div class="video"></div>
		<script>
			var videoObject = {
				container: '.video', //容器的ID或className
				language:'en',//配置为使用英文语言包
				video:'website:../video.json'
			};
			new ckplayer(videoObject);
		</script>
	</body>
</html>

观看示例视频

视频容器

#限制进度调节框

限制进度调节框有两种形式:

1:初始化时进行配置

2:使用js实时对播放器进行配置

var videoObject = {
    ...
    timeScheduleAdjust:1,
    ...
}
new ckplayer(videoObject);

timeScheduleAdjust的默认值为1:正常拖动

0=禁止拖动

1=正常拖动

2=是只能前进(向右拖动)

3=是只能后退

4=是只能前进但能回到第一次拖动时的位置

5=看过的地方可以随意拖动

观看示例

视频容器

#右键点击“关于视频”显示的内容说明

在默认的播放器右键菜单里有一个“关于视频”菜单项,点击该菜单项会在播放器界面上显示相关内容,该部分内容可以自定义,如果未定义,则使用默认内容。

自定义的内容里支持部分变量,以下列出支持的变量:

{loadTime}:已加载的秒数

{duration}:视频总时间

{videoWidth}:视频宽度

{videoHeight}:视频高度

{volume}:视频音量

{fps}:FPS

{audioDecodedByteCount}:音频解码字节数

{videoDecodedByteCount}:视频解码字节数

观看示例视频

视频容器

#弹幕和缓动

弹幕的步骤原理如下:

第一步:添加一个元件至播放器内,位置为播放器最右侧外方

第二步:调用元件的缓动事件让其缓动到播放器左侧,并且监听该缓动事件

第三步:监听到缓动结束,删除掉该元件

var ele=player.layer({//新建一个元件,附值给变量ele
    class:'dm',//元件样式名称
    content:'弹幕内容'
});
//animate-缓动函数,ele.getWidth()是获取元件的宽度
ele.animate('left:10px;top:10px;width:100px;height:20px'),1000,'',function(){
    ele.remove();//删除元件
});

使用解释:animate('样式列表,支持:top,bottom,left,right,alpha,width,height',时间,'效果',缓动结束动作)

观看弹幕示例

视频容器

观看所有支持的缓动示例

视频容器

观看完整弹幕解决示例(仅限前端)

视频容器

#视频预览

视频预览功能是使用截图完成,即初始化播放器时需要为该视频提供一组图片,可以是多张,每张图片的尺寸可以自定义,每张图片里包含10x10=100张小图片。截图制作可以查看本手册里ffmpeg相关内容

<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		preview: { //预览图片
			file: ['/video/1.png', '/video/2.png', '/video/3.png', '/video/4.png'],
			scale: 2,//预览图片截图间隔时间,单位:秒
			thumbnail:[10,10],//缩略图的每行数量,列数量(共多少列)
			type:0//预览图样式,0=单个,1=横排
		},
		video:'temp.mp4'
	};
	new ckplayer(videoObject);
</script>


观看示例

视频容器

#提示点

提示点是指在进度条上展示的特定点,用于提示当前时间点的内容。

<div class="video"></div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		prompt: [ //提示点
			{
				words: '对战:精英怪•赤尻马猴',
				time: 210//时间,单位:秒
			},
			{
				words: '对战:亢金龙',
				time: 386
			}
		],
		video:'website:../video.json'
	};
	new ckplayer(videoObject);
</script>

观看示例

视频容器

#字幕

ckplayer的字幕功能是使用的系统自带的字幕功能,在绝大多数浏览器内正确支持,下面的代码展示了一种双语字幕支持的示例:

<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		track:[
			{
				kind:'subtitles',
				src:'/video/zh.vtt',
				srclang:'zh',
				label:'中文',
				default:false,
			},
			{
				kind:'subtitles',
				src:'/video/en.vtt',
				srclang:'en',
				label:'English',
				default:false,
			}			
		],
		video:'website:../video.json'
	};
	new ckplayer(videoObject);
</script>

观看示例视频

视频容器

#截图

使用截图功能,需要考虑两部分内容,一是服务器端需在配置权限允许播放视频的域截图,二是调用播放器代码需要配置(crossOrigin属性配置跨域),具体示例代码如下:

<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
<script>
	//调用开始
	var videoObject = {
		container: '.video', //视频容器
		crossOrigin:'Anonymous',//发送跨域字符
		video:'video.mp4'//视频地址
	};
	var player=new ckplayer(videoObject)//调用播放器并赋值给变量player
	player.screenshot()//截图并返回图片地址
</script>

观看示例

视频容器

#默认旋转视频

在播放器初始化时可以指定视频的旋转角度,旋转角度只支持4个值:0,90,180,270。以下为代码示例:

var videoObject = {
    container: '.video', //视频容器
    poster:'video/poster.png',//封面图片
    rotate:90,//旋转90度
    video:'video/lc.mp4'//视频地址
};
var player=new ckplayer(videoObject)//调用播放器并赋值给变量player

观看示例

视频容器

#默认缩放视频

在播放器初始化时可以指定视频的旋转角度,旋转角度只支持4个值:0,90,180,270。以下为代码示例:

var videoObject = {
    container: '.video', //视频容器
    poster:'video/poster.png',//封面图片
    zoom:50,//缩放50
    video:'video/lc.mp4'//视频地址
};
var player=new ckplayer(videoObject)//调用播放器并赋值给变量player

观看示例视频

视频容器

#同页放置多个播放器

需要多次调用播放器代码,并且设置容器不同即可。示例代码如下:

<div class="video">容器一</div>
<div class="video2">容器二</div>
<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		video:'website:../m3u8.json'
	};
	new ckplayer(videoObject);
	/*调用第二个播放器开始*/
	var videoObject2 = {
		container: '.video2', //容器的ID或className
		video:'website:../m3u8.json'
	};
	new ckplayer(videoObject2);
</script>

观看示例

视频容器

#记忆播放

记忆播放可以使用播放器内置属性实现,相关代码如下:

<script>
	var videoObject = {
		container: '.video', //容器的ID或className
		seek:'cookie',//指定跳转到cookie记录的时间,使用该属性必需配置属性cookie
		cookie:'abcdefg',//cookie名称,请在同一域中保持唯一
		video:'website:../m3u8.json'//视频地址
	};
	ckplayer(videoObject);
</script>

观看示例

视频容器