ckplayer

body {

margin: 0;

padding: 0px;

font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体";

font-size: 14px

}

var videoObject = {

//playerID:'ckplayer01',//播放器ID，第一个字符不能是数字，用来在使用多个播放器时监听到的函数将在所有参数最后添加一个参数用来获取播放器的内容

container: '#video', //容器的ID或className

variable: 'player', //播放函数名称

loaded: 'loadedHandler', //当播放器加载后执行的函数

loop: true, //播放结束是否循环播放

//autoplay: true, //是否自动播放

//duration: 500, //设置视频总时间

// cktrack: 'material/srt.srt', //字幕文件

//poster: 'material/poster.jpg', //封面图片

preview: { //预览图片

file: ['material/mydream_en1800_1010_01.png', 'material/mydream_en1800_1010_02.png'],

scale: 2

},

config: '', //指定配置函数

debug: true, //是否开启调试模式

//flashplayer: true, //强制使用flashplayer

drag: 'start', //拖动的属性

seek: 0, //默认跳转的时间

//playbackrate:1,//默认速度的编号，只对html5有效,设置成-1则不显示倍速

//advertisements:'website:ad.json',

//front:'frontFun',//上一集的操作函数

//next:'nextFun',//下一集的操作函数

//广告部分开始

// adfront: 'http://www.ckplayer.com/yytf/swf/front001.swf,http://www.ckplayer.com/yytf/swf/front002.swf', //前置广告

// adfronttime: '15,15',

// adfrontlink: '',

// adpause: 'http://www.ckplayer.com/yytf/swf/pause001.swf,http://www.ckplayer.com/yytf/swf/pause002.swf',

// adpausetime: '5,5',

// adpauselink: '',

// adinsert: 'http://www.ckplayer.com/yytf/swf/insert001.swf,http://www.ckplayer.com/yytf/swf/insert002.swf',

// adinserttime: '10,10',

// adinsertlink: '',

// inserttime: '10,80',

// adend: 'http://www.ckplayer.com/yytf/swf/end001.swf,http://www.ckplayer.com/yytf/swf/end002.swf',

// adendtime: '15,15',

// adendlink: '',

//广告部分结束

promptSpot: [ //提示点

{

words: '提示点文字01',

time: 30

},

{

words: '提示点文字02',

time: 150

}

],

//mobileCkControls:true,//是否在移动端(包括ios)环境中显示控制栏

//live:true,//是否是直播视频，true=直播，false=点播

video: [

/* ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],

['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],

['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],*/

['http://video.xuecheng.com/video/lucene.m3u8', 'video/m3u8', '超清', 0]

]

};

var player = new ckplayer(videoObject);

function loadedHandler() {

player.addListener('error', errorHandler); //监听视频加载出错

player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据

player.addListener('duration', durationHandler); //监听播放时间

player.addListener('time', timeHandler); //监听播放时间

player.addListener('play', playHandler); //监听暂停播放

player.addListener('pause', pauseHandler); //监听暂停播放

player.addListener('buffer', bufferHandler); //监听缓冲状态

player.addListener('seek', seekHandler); //监听跳转播放完成

player.addListener('seekTime', seekTimeHandler); //监听跳转播放完成

player.addListener('volume', volumeChangeHandler); //监听音量改变

player.addListener('full', fullHandler); //监听全屏/非全屏切换

player.addListener('ended', endedHandler); //监听播放结束

player.addListener('screenshot', screenshotHandler); //监听截图功能

player.addListener('mouse', mouseHandler); //监听鼠标坐标

player.addListener('frontAd', frontAdHandler); //监听前置广告的动作

player.addListener('wheel', wheelHandler); //监听视频放大缩小

player.addListener('controlBar', controlBarHandler); //监听控制栏显示隐藏事件

player.addListener('clickEvent', clickEventHandler); //监听点击事件

player.addListener('definitionChange', definitionChangeHandler); //监听清晰度切换事件

player.addListener('speed', speedHandler); //监听加载速度

}

function errorHandler() {

console.log('出错')

changeText('.playerstate', '状态：视频加载错误，停止执行其它动作，等待其它操作');

}

function loadedMetaDataHandler() {

var metaData = player.getMetaDate();

//console.log(metaData)

var html = ''

//console.log(metaData);

if(parseInt(metaData['videoWidth']) > 0) {

changeText('.playerstate', '状态：获取到元数据信息，如果数据错误，可以使用延迟获取');

html += '总时间：' + metaData['duration'] + '秒，';

html += '音量：' + metaData['volume'] + '(范围0-1)，';

html += '播放器的宽度：' + metaData['width'] + 'px，';

html += '播放器的高度：' + metaData['height'] + 'px，';

html += '视频宽度：' + metaData['videoWidth'] + 'px，';

html += '视频高度：' + metaData['videoHeight'] + 'px，';

html += '视频原始宽度：' + metaData['streamWidth'] + 'px，';

html += '视频原始高度：' + metaData['streamHeight'] + 'px，';

html += '是否暂停状态：' + metaData['paused'];

} else {

changeText('.playerstate', '状态：未正确获取到元数据信息');

html = '没有获取到元数据';

}

changeText('.metadata', html);

}

function playHandler() {

//player.animateResume();//继续播放所有弹幕

changeText('.playstate', getHtml('.playstate') + ' 播放');

window.setTimeout(function() {

loadedMetaDataHandler();

}, 1000);

loadedMetaDataHandler();

}

function pauseHandler() {

//player.animatePause();//暂停所有弹幕

changeText('.playstate', getHtml('.playstate') + ' 暂停');

loadedMetaDataHandler();

}

function timeHandler(time) {

changeText('.currenttimestate', '当前播放时间(秒)：' + time);

}

function durationHandler(duration) {

changeText('.duration', '总时间(秒)：' + duration);

}

function seekHandler(state) {

changeText('.seekstate', getHtml('.seekstate') + ' ' + state);

}

function seekTimeHandler(time) {

changeText('.seekstate', getHtml('.seekstate') + ' seekTime:' + time);

}

function bufferHandler(buffer) {

//console.log(buffer);

changeText('.bufferstate', '缓冲：' + buffer);

}

function volumeChangeHandler(vol) {

changeText('.volumechangestate', '当前音量：' + vol);

}

function speedHandler(n) {

changeText('.speed', '当前加载速率：' + n);

}

function screenshotHandler(obj) {

changeText('.screenshot', '图片名称：' + obj['name'] + ',截图对象：' + obj['object'] + ',是否用户保存：' + obj['save'] + ',图片：'%20+%20obj%5B'base64'%5D%20+%20'');

}

function fullHandler(b) {

if(b) {

html = ' 全屏';

} else {

html = ' 否';

}

changeText('.fullstate', getHtml('.fullstate') + html);

}

function endedHandler() {

changeText('.endedstate', '播放结束');

}

function mouseHandler(obj) {

changeText('.mouse', '鼠标位置，x：' + obj['x'] + '，y：' + obj['y']);

}

function frontAdHandler(status) {

changeText('.frontad', getHtml('.frontad') + ' ' + status);

}

var zoomNow = 1;

function wheelHandler(n) {

if(n > 0) {

if(zoomNow < 5) {

zoomNow += 0.1;

}

} else {

if(zoomNow > 0) {

zoomNow -= 0.1;

}

}

player.videoZoom(zoomNow);//支持鼠标滚轮控制放大缩小

}

function controlBarHandler(show){

if(show) {

html = ' 显示';

} else {

html = ' 隐藏';

}

changeText('.controlBar', getHtml('.controlBar') + html);

}

function clickEventHandler(eve){

changeText('.clickEvent', getHtml('.clickEvent') + ' '+eve);

}

function definitionChangeHandler(num){

changeText('.definitionChange', getHtml('.definitionChange') + ',切换清晰度编号'+num);

}

var videoChangeNum = 0;

function seekTime() {

var time = parseInt(player.getByElement('.seektime').value);

var metaData = player.getMetaDate();

var duration = metaData['duration'];

if(time < 0) {

alert('请填写大于0的数字');

return;

}

if(time > duration) {

alert('请填写小于' + duration + '的数字');

return;

}

player.videoSeek(time);

}

function changeVolume() {

var volume = player.getByElement('.changevolume').value;

volume = Math.floor(volume * 100) / 100

if(volume < 0) {

alert('请填写大于0的数字');

return;

}

if(volume > 1) {

alert('请填写小于1的数字');

return;

}

player.changeVolume(volume);

}

function changeSize() {

player.changeSize(w, h)

}

function frontFun() {

alert('点击了前一集');

}

function nextFun() {

alert('点击了下一集');

}

function adjump() {

alert('点击了跳过广告按钮');

}

function newVideo() {

var videoUrl = player.getByElement('.videourl').value;

changeVideo(videoUrl);

}

function newVideo2() {

var videoUrl = player.getByElement('.videourl2').value;

changeVideo(videoUrl);

}

function changeVideo(videoUrl) {

if(player == null) {

return;

}

var newVideoObject = {

container: '#video', //容器的ID

variable: 'player',

autoplay: true, //是否自动播放

loaded: 'loadedHandler', //当播放器加载后执行的函数

video: videoUrl

}

//判断是需要重新加载播放器还是直接换新地址

if(player.playerType == 'html5video') {

if(player.getFileExt(videoUrl) == '.flv' || player.getFileExt(videoUrl) == '.m3u8' || player.getFileExt(videoUrl) == '.f4v' || videoUrl.substr(0, 4) == 'rtmp') {

player.removeChild();

player = null;

player = new ckplayer();

player.embed(newVideoObject);

} else {

player.newVideo(newVideoObject);

}

} else {

if(player.getFileExt(videoUrl) == '.mp4' || player.getFileExt(videoUrl) == '.webm' || player.getFileExt(videoUrl) == '.ogg') {

player = null;

player = new ckplayer();

player.embed(newVideoObject);

} else {

player.newVideo(newVideoObject);

}

}

}

var elementTemp = null; //保存元件

function newElement() {

if(elementTemp != null) {

alert('为了演示的简单性，本实例只能建立一个元件');

return;

}

var attribute = {

list: [ //list=定义元素列表

{

type: 'png', //定义元素类型：只有二种类型，image=使用图片，text=文本

file: 'material/logo.png', //图片地址

radius: 30, //图片圆角弧度

width: 30, //定义图片宽，必需要定义

height: 30, //定义图片高，必需要定义

alpha: 0.9, //图片透明度(0-1)

marginLeft: 10, //图片离左边的距离

marginRight: 10, //图片离右边的距离

marginTop: 10, //图片离上边的距离

marginBottom: 10, //图片离下边的距离

clickEvent: "link->http://www.ckplayer.com"

}, {

type: 'text', //说明是文本

text: '演示弹幕内容，弹幕只支持普通文本，不支持HTML', //文本内容

color: '0xFFDD00', //文本颜色

size: 14, //文本字体大小，单位：px

font: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei,"\5FAE\8F6F\96C5\9ED1", "黑体",Arial', //文本字体

leading: 30, //文字行距

alpha: 1, //文本透明度(0-1)

paddingLeft: 10, //文本内左边距离

paddingRight: 10, //文本内右边距离

paddingTop: 0, //文本内上边的距离

paddingBottom: 0, //文本内下边的距离

marginLeft: 0, //文本离左边的距离

marginRight: 10, //文本离右边的距离

marginTop: 10, //文本离上边的距离

marginBottom: 0, //文本离下边的距离

backgroundColor: '0xFF0000', //文本的背景颜色

backAlpha: 0.5, //文本的背景透明度(0-1)

backRadius: 30, //文本的背景圆角弧度

clickEvent: "actionScript->videoPlay"

}

],

x: 10, //元件x轴坐标，注意，如果定义了position就没有必要定义x,y的值了，x,y支持数字和百分比，使用百分比时请使用单引号，比如'50%'

y: 50, //元件y轴坐标

//position:[1,1],//位置[x轴对齐方式(0=左，1=中，2=右)，y轴对齐方式(0=上，1=中，2=下)，x轴偏移量(不填写或null则自动判断，第一个值为0=紧贴左边，1=中间对齐，2=贴合右边)，y轴偏移量(不填写或null则自动判断，0=紧贴上方，1=中间对齐，2=紧贴下方)]

alpha: 1, //元件的透明度

backgroundColor: '0xFFDD00', //元件的背景色

backAlpha: 0.5, //元件的背景透明度(0-1)

backRadius: 60, //元件的背景圆角弧度

clickEvent: "actionScript->videoPlay"

}

elementTemp = player.addElement(attribute);

}

function deleteElement() {

if(elementTemp != null) {

player.deleteElement(elementTemp);

elementTemp = null;

} else {

alert('演示删除元件需要先添加');

}

}

function newDanmu() {

//弹幕说明

var danmuObj = {

list: [{

type: 'image', //定义元素类型：只有二种类型，image=使用图片，text=文本

file: 'material/logo.png', //图片地址

radius: 30, //图片圆角弧度

width: 30, //定义图片宽，必需要定义

height: 30, //定义图片高，必需要定义

alpha: 0.9, //图片透明度(0-1)

marginLeft: 10, //图片离左边的距离

marginRight: 10, //图片离右边的距离

marginTop: 10, //图片离上边的距离

marginBottom: 10, //图片离下边的距离

clickEvent: "link->http://"

}, {

type: 'text', //说明是文本

text: '演示弹幕内容，弹幕只支持普通文本，不支持HTML', //文本内容

color: '0xFFDD00', //文本颜色

size: 14, //文本字体大小，单位：px

font: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei,"\5FAE\8F6F\96C5\9ED1", "黑体",Arial', //文本字体

leading: 30, //文字行距

alpha: 1, //文本透明度(0-1)

paddingLeft: 10, //文本内左边距离

paddingRight: 10, //文本内右边距离

paddingTop: 0, //文本内上边的距离

paddingBottom: 0, //文本内下边的距离

marginLeft: 0, //文本离左边的距离

marginRight: 10, //文本离右边的距离

marginTop: 10, //文本离上边的距离

marginBottom: 0, //文本离下边的距离

backgroundColor: '0xFF0000', //文本的背景颜色

backAlpha: 0.5, //文本的背景透明度(0-1)

backRadius: 30, //文本的背景圆角弧度

clickEvent: "actionScript->videoPlay"

}],

x: '100%', //x轴坐标

y: "50%", //y轴坐标

//position:[2,1,0],//位置[x轴对齐方式(0=左，1=中，2=右)，y轴对齐方式(0=上，1=中，2=下)，x轴偏移量(不填写或null则自动判断，第一个值为0=紧贴左边，1=中间对齐，2=贴合右边)，y轴偏移量(不填写或null则自动判断，0=紧贴上方，1=中间对齐，2=紧贴下方)]

alpha: 1,

//backgroundColor:'#FFFFFF',

backAlpha: 0.8,

backRadius: 30 //背景圆角弧度

}

var danmu = player.addElement(danmuObj);

var danmuS = player.getElement(danmu);

var obj = {

element: danmu,

parameter: 'x',

static: true, //是否禁止其它属性，true=是，即当x(y)(alpha)变化时，y(x)(x,y)在播放器尺寸变化时不允许变化

effect: 'None.easeOut',

start: null,

end: -danmuS['width'],

speed: 10,

overStop: true,

pauseStop: true,

callBack: 'deleteChild'

};

var danmuAnimate = player.animate(obj);

}

function deleteChild(ele) {

if(player) {

player.deleteElement(ele);

}

}

function changeText(div, text) {

player.getByElement(div).innerHTML = text;

}

function getHtml(div) {

return player.getByElement(div).innerHTML;

}

var zoom = 1;

官网：http://www.ckplayer.com,版本号：X

以下仅列出部分功能，全部功能请至官网

《手册》查看

播放

暂停

播放/暂停

静音

取消静音

清除视频(仅flashplayer)

获取元数据

添加元件

删除元件

添加弹幕

视频截图(需要视频权限)

播放器截图(需要视频权限)

暂停广告(仅flashplayer)

继续播放广告(仅flashplayer)

关闭(结束)广告(仅flashplayer)

显示控制栏

隐藏控制栏

默认角度

顺时针旋转

逆时针旋转

旋转90

旋转180

旋转270

旋转-90

旋转-180

旋转-270

默认大小

放大

缩小

默认速度(仅H5)

0.5倍(仅H5)

1.5倍(仅H5)

2倍(仅H5)

正常拖动

不能拖动

只能前进(向右拖动)

只能后退

能回到第一次拖动时的位置

看过的地方可以随意拖动

原始比例(仅flashplayer)

4:3(仅flashplayer)

16:9(仅flashplayer)

调整亮度(仅flashplayer)

恢复亮度(仅flashplayer)

调整对比度(仅flashplayer)

恢复对比度(仅flashplayer)

调整饱和度(仅flashplayer)

恢复饱和度(仅flashplayer)

调整色相(仅flashplayer)

恢复色相(仅flashplayer)

播放

播放

单独监听功能：

播放状态：

跳转状态:无

缓冲:100

加载速率：0

当前音量：0.8

是否全屏：否

控制栏：显示

还未结束

当前播放时间(秒)：0

前置广告状态：

鼠标位置

切换清晰度：

点击监听：

监听截图功能(截图功能需要视频权限)

一键复制

编辑

Web IDE

原始数据

按行查看

历史

ckplayer默认html,ckplayer.html相关推荐

  1. ck6.8整合php,WordPress整合ckplayer X和ckplayer 6.8的最新完美代码

    WordPress整合ckplayer X和ckplayer 6.8的最新完美代码,网上也有很多代码,但是都有些问题,正好自己有个网站需要用这个播放器,就把网上资源拿来研究了下,目前ckplayer ...

  2. 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！...

    CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格 式播放,此播放器的特点在于用户可以自己 ...

  3. WordPress整合ckplayer X3视频播放器插件

    使用教程 1.下载插件,并将"ckplayer"插件文件夹上传WordPress插件目录"/wp-content/plugins/" 2.登录后台启用" ...

  4. 资源管理系统-VUE使用ckplayer实现视频列表播放

    一. 下载ckplayer插件 官网地址:http://www.ckplayer.com/down/ 二.加压后将ckplayer放进VUE项目的static目录下: 三.在index.html中引入 ...

  5. 苹果cms v10版本整合ckplayer播放器

    rt,安装了苹果cms v10 版本搭建影视系统,结果没有播放器按钮 解决问题方案一: 那是因为采集插件视频使用的播放器是ckplayer或者是被采集的网使用其他的播放器是自己没有添加进去,一样没有播 ...

  6. 开源ckplayer 网页播放器， 跨平台 html5 mobile ，flv f4v mp4 rtmp协议

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开源ck ...

  7. 开源ckplayer 网页播放器去logo去广告去水印修改

    功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...

  8. 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

    开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ! 博客分类: Javascript /Jque ...

  9. php网站整合ck播放器,wordpress整合ckplayer最新版 wp文章短代码调用ck播放器

    今天翻了翻网上的教程,试试把ckplay整合到wp里面,虽然没什么多大的帮助,但是小试一手,很简单,几分钟就成功了-- 试试下效果,不错就分享一下吧 CKplayer是可以由大家自己diy播放器风格, ...

  10. 【经典】直播、点播播放器ckplayer

    前些日子,在做一个视频监控内容安全检测demo,找直播专用播放器时发现ckplayer,觉得还可以!例子齐全,功能完善,demo也挺全.... 使用过程中可能会需要修改的地方: 1.logo修改 st ...

最新文章

  1. localdatetime转化为date_为啥你用@JsonFormat注解时，LocalDateTime会反序列化失败？
  2. crontab定时任务运行
  3. ios多线程 -- NSOperation 简介
  4. 各个层次的gcc警告
  5. 集合使用与内部实现原理
  6. Path(0)贝塞尔曲线
  7. ie代理配置错误_电缆厂组织结构图的7个常犯错误！
  8. 网易云音乐IPO拟至少募30.4亿港元 开售半日已获足额认购
  9. 【正在等待可用套接字】解决方法
  10. C++优先队列自定义排序总结
  11. Windows Pygame 安装教程 (自己识别版本号并下载)
  12. 计算机组装配置兼容,电脑组装时怎么选择配置主板
  13. visual studio 调试php,使用visual studio code调试php代码
  14. 【TED ON FLEX】支持flashplayer的RIBBIT系统
  15. 大疆机甲大师教育机器人Python开发：中文命名变量初尝试
  16. 如何在eclipse制作的APP中添加背景图
  17. IOC和DI到底是什么？
  18. 数据挖掘导论Pangaea-Ning Tan 读书笔记——（第一，二，三章）
  19. 一个sql server2005分页的存储过程
  20. linux服务器性能阈值,linux – 如何根据可用内核的数量选择最大负载阈值？

热门文章

  1. 微信小程序弹窗（提示框和确认框）
  2. 如何理解C++中的.h文件和.cpp文件
  3. 向量场的散度和旋度_矢量场散度和旋度的物理意义
  4. kmeans算法中的sse_kmeans算法理解及代码实现
  5. 英语语法新思维初级分享
  6. 有关网页没有显示数据库的值的问题
  7. 已处理证书链但是在不受信任提供程序信任的_什么是区块链(Blockchain)?这是我见过的最通俗易懂的解释...
  8. MD5 密码破解 碰撞 网站
  9. openg显示Bmp图片
  10. 求最大公约数和最小公倍数的做法（Java实现）