ckplayer超酷flv网页播放器

近日，项目中要实现jsp视屏播放功能，视频的格式为flv,要求视频具有播放/暂停功能，视频分享等功能。根据需求，最终选择ckplayer来实现。

1.ckplayer 超酷flv网页播放器简介：

一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，具体的各按钮的位置和底部背景的设置在ckplayer/ckplayer.js里设置。

2.风格制作中一些重要的参数：

风格制作主要使用到ckplayer.js和assets文件夹，assets文件夹主要用来存放各按钮的图片，所有图片都是以png格式存储。

ckplayer.js里涉及到风格的行数为第2行至第41行，风格参数说明如下：

var cklogo='ckplayer/assets/cklogo.png';//logo,用来显示在播放器界面上的logo

var ckalign=2;//logo的对齐方式，0是左上，1是左下，2是右上，3是右下

var ckalign_x=100;//这里跟ckalign有直接关系，如果是ckalign=0/1 左边距离 2/3 是右边距离

var ckalign_y=10;//同上，ckalign=0/2 离上边距离，1/3 是离下边距离

var progressbar_frame='#191919';//进度条外框颜色

var progressbar_loadbox='#606060';//预加载进度条的颜色

var progressbar_schedule='#056E9F';//播放进度条颜色

var all_Background='#000000';//总体背景色

var buttom_Background='0x2C2C2C,0x212121';//底部容器颜色，如果想要渐变，请使用数组如buttom_Background='0xFF0000,0xFFDD00,0xFFFFFF';

var title_Background='#000000';//提示框背景色

var title_borderColor='#696969';//提示框边框色

var title_Color='#DEDEDE';//提示框文字颜色

var buttom_height=30; //底部容器的高度

var schedule_height=4;//进度框的高度

var suspension_width=14;//进度框上的悬浮框宽度

var suspension_height=8;//进度框上的悬浮框高度

var play_width=35;//播放按钮和暂停按钮的宽度

var play_height=30;//播放按钮和暂停按钮的高度

var play_x=0;//播放按钮和暂停按钮的X坐标-离底部容器左边的距离

var play_y=0;//播放按钮和暂停按钮的y坐标-离底部容器顶部的距离

var statistics_width=100;//统计框的宽度-显示当前进度和视频总长时间的文本框

var statistics_height=12;//统计框的高度

var statistics_x=45;//统计框离左边的距离

var statistics_y=10;//统计框离底部容器顶端的距离

var statistics_color='#FFFFFF';//统计框的字体颜色

var full_width=35;//全屏按钮的宽

var full_height=30;//全屏按钮的高

var full_x=0;//全屏按钮离左边的距离，如果设置成0则为距右对齐

var full_y=0;//全屏按钮离底部容器上方的距离

var volume_width=53;//音量框的宽度

var volume_height=4;//音量框的高度

var volume_x=100;//音量框离底部容器右边的距离，设置成0则为右对齐

var volume_y=13;//音量框离底部容器顶部的距离

var volume_float_width=6;//音量浮动框的宽度

var volume_float_height=12;//音量浮动框的高度

var volume_float_y=4;//音量浮动框离底部容器的顶部距离

var sound_width=35;//开启和静音按钮的宽度

var sound_height=30;//开启和静音按钮的高度

var sound_x=140;//开启和静音按钮离右边的距离

var sound_y=0//开启和静音按钮离底部容器顶部距离

3.软件下载

针对不同的用户需求，提供两个版本供选择

精简版：适用于新手

url: http://download.csdn.net/detail/iyclh/5719303

完整版：适用于相对比较熟的开发人员

url: http://download.csdn.net/detail/iyclh/5719319

具体可以参看官网说明：http://www.ckplayer.com/

开发实例：

根据项目需求，我的操作是：

1.在jsp页面的适当位置添加如下代码：

<embed src="${applicationScope.rootpath}js/ckplayer/ckplayer.swf" flashvars="f=${applicationScope.rootpath}/video/move.flv" quality="high" width="1200" height="600" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"></embed>

参数可以根据自身情况进行修改。

2.解压缩ckplayer完整版，提取ckplayer文件夹，并在项目webroot目录下/js/目录下。

3.将需要播放的flv格式文件放在webroot目录下/video/目录下。

4.测试播放效果

ckplayer超酷flv网页播放器相关推荐

CKplayer 超酷Flv播放器演示
原文:CKplayer 超酷Flv播放器演示源代码下载地址:http://www.zuidaima.com/share/1550463717100544.htm 在线视频播放,支持.mp4格式
flv网页播放器php源码下载,JavaScript_js实现的万能flv网页播放器代码，本文实例讲述了js实现的万能fl - phpStudy...
js实现的万能flv网页播放器代码本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: 附: swfobject.js的官方地址:http://blog.deconce ...
[转载备用]极酷SevenColorPlayer网页播放器(炫彩广告版),最强播放器定制
极酷炫彩广告版(SevenColorPlayer)V2网页播放器介绍 * 支持前置flash广告.支持视频广告.支持暂停广告.支持文字滚动广告: * 支持自行[开启]或[关闭]前置flash广告,支 ...
博客空间超酷flash音乐播放器4
网易博客代码: <embed allowScriptAccess="never" allowNetworking="internal" src=" ...
JW PLAYER 是一个界面简洁、功能齐全的在线flv flash播放器
JW PLAYER 是一个界面简洁.功能齐全的在线flv flash播放器.有着很多可选控制参数. 多个参数可以混合使用,下面选择几个作简要说明: file (FLV文件的地址,如果不设置则默认为jw ...
开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！...
CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格式播放,此播放器的特点在于用户可以自己 ...
开源ckplayer 网页播放器，跨平台 html5 mobile ，flv f4v mp4 rtmp协议
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开源ck ...
开源ckplayer 网页播放器，跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！
开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ! 博客分类: Javascript /Jque ...
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN 博客分类: Javascript /Jquery / Bo ...
如何将embed嵌入式Flash网页播放器替换为CKplayer
工作中,经常遇到CMS里内嵌的使用embed标签的Flash网页播放器,这些播放器交互性差.不好用,但是因为embed标签往往已通过富文本编辑器写入了数据库的内容字段,很难去改写.如何在不改变数据库的 ...

ckplayer超酷flv网页播放器

ckplayer超酷flv网页播放器相关推荐

最新文章

热门文章