ckplayer 的使用基本功能实现(一)

有个项目里用到视频播放功能,虽然是国产的插件,但我觉得做的还是不错,而且是免费使用,顺便支持下国内的一些项目(O(∩_∩)O~)。

一、首先去官网下载 插件 http://www.ckplayer.com/

下载完了以后,解压里面有demo,我觉得demo做的不错,有各种参数切换查看,兼容flash与html5  在pc与移动设备都可播放。

二、实现任意拖动播放

官网也有说明,这边自己实现了一遍,记录下而已,以便下次参考。

(1)下载最新nginx

nginx官网地址(最新下载地址):http://nginx.org/en/download.html

我的是windows2008 r2 64位服务器 我下载

解压后放到D盘,当然你可以放到自己喜欢的盘下,这里要特别注意,路径里不要有中文符号(不能有中文)

D:\nginx

下面配置nginx
找到conf/nginx.conf文件(找不到说明你没开显示文件后缀名的功能),用记事本打开
在server段,不知道server段在哪?那就找
        location / {
            root   html;
            index  index.html index.htm;
        }
在该段第三行的下方添加上如下代码
        location ~ .flv {
            flv;
        }
        location ~ .mp4 {
            mp4;
        }

最后的效果应该如下图(部份,只截了改动的部份)

注意:listen    8088;  这边的8088端口可以修改自己想要的  当然,不要与IIS配置的或者与其他的冲突即可。

下面来启动nginx,win+r 输入cmd  进入nginx目录,输入:start nginx

启动后看到这个文件就成功了,另外在服务器输入:http://localhost:8088/  浏览器中看到

完成了启动了,然后服务器配置好了,把1.mp4视频放入D:\nginx\html 该目录下,视频播放路径为http://localhost:8088/1.mp4

那么ckplayer的播放器配置为:

<div id="a1"></div>
<script type="text/javascript" src="ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
     f: 'http://localhost:8088/1.mp4',
     c:'0'
     ,h:'4',
     q:'start'
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
var video=['http://localhost:8088/1.mp4->video/mp4'];
 CKobject.embed('ckplayer.swf', 'a1', 'ckplayer_a1', '600', '400',false, flashvars,video, params);
</script>

这样的话   进度条可任意拖动了。

遗留的问题,如果视频已经缓存完毕了,我拖动下进度条,又要重新进行读取数据缓存了,也就是说 任意拖动 缓存不起作用了,自己体会下吧。

如果你们解决这个问题 请麻烦告诉我,万分感谢~

有兴趣加下QQ群交流:112992863 (微软技术交流群)

ckplayer的更多相关文章

  1. ckplayer 如何在PC上完美支持 m3u8播放

    使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用.功能也是基本满足我们的需求的. 一般情况我们都使用普通的视频格式比如mp4,flv等播放,但如果视频文件过大,会加载 ...

  2. 建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器

    故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了. ...

  3. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  4. ckplayer视频播放插件使用

    研究ckplayer插件播放视频,播放视频需要配置信息修改如下: 1.设置ckplayer.js中的logo: 'null' 可以隐藏视频播放头部的图标: 2.设置ckplayer.js中的ckcpt ...

  5. CKplayer功能配置

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

  6. ckplayer播放器去掉右边的开关灯分享插件

    在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...

  7. ckplayer.js视频播放插件

    网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...

  8. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  9. 使用ckplayer搭建rtmp视频直播应用

    视频直播才有的是RTMP协议进行视频实时流传输,在这里我们用到的软件都是 adobe 公司的一个是:Flash Media Server4 另一个是flash media live encoder 这 ...

  10. CKplayer 新手入门超简单使用教程

    网页播放器都有使用的前提(问1). ~~~~~~~分隔线~~~~~~~ 只需一步先看播放器效果(问2): 下载附件,解压内容(ckplayer文件夹和ckplayer.html)到网站根目录,在浏览器 ...

随机推荐

  1. lsblk请参阅块设备

    lsblk可以查看分区和挂载的磁盘使用情况 lsblk全部的參数 -a, --all            显示全部设备  -b, --bytes          以bytes方式显示设备大小  - ...

  2. Android.9图片评论(一个)

    什么是.9图片 至于什么是.9图片这里就简单提一下,即图片后缀名前有.9的图片,如pic.9.png.pic1.9.jgp,诸如此类的图片就称为.9图片. .9图片的作用 ①.9图片的作用是在图片拉伸 ...

  3. 采用Flume实时采集和处理数据

    它已成功安装Flume在...的基础上.本文将总结使用Flume实时采集和处理数据,详细过程,如下面: 第一步,在$FLUME_HOME/conf文件夹下,编写Flume的配置文件,命名为flume_ ...

  4. 用Unicode迎接未来

         项目中使用了emoji,然后,问题产生了,后端MySQL数据库无法存储emoji字符,悲了个剧.      emoji是Unicode字符集的子集,Unicode的使用应该非常普遍了,怎么会 ...

  5. 如何使用Maven创建web工程(详细步骤)

    使用eclipse插件创建一个web project 首先创建一个Maven的Project例如以下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing ...

  6. SSH没有password安全日志

    client: ssh-keygen -t rsa server结束 mkdir .ssh chmod 755 .ssh 从公开密钥client上传server scp .ssh/id_rsa.phb ...

  7. osx launchpad删除图标

    安装了个parallels desktop之后,OSX中的launchpad中的图标多了不少,但是好多都不是我自己想要的,我们该怎么删除或者改动呢,以下介绍一些方法: ①直接操作Appications ...

  8. Cocos2d-x v3.0 正式版 如何创建一个项目,TestCpp执行

    欢迎增加 Cocos2d-x 交流群: 193411763 转载请注明原文出处:http://blog.csdn.net/u012945598/article/details/24456579 首先到 ...

  9. EasyUI 扩展自己定义EasyUI校验规则 验证规则(经常使用的)

    比如 校验输入框仅仅能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="ra ...

  10. Android第一次打开应用程序,实现向导界面

    转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/42079167 先说下思路:1.利用Preference存储数据,来记录是否是 ...