ckplayer-超酷网页视频播放器的使用

现在网上做视频播放的很多,我就用过ckplayer这一款,虽然不知道别的播放器怎么样,但ckplayer还是比较不错的。调用简单、说明清晰、可扩展性很强,我老喜欢了。

当然引用人家的东西一定得去人家的官网上看看,因为官网上才正规的帮助手册,案例展示,详细的配置方法。看过了配置说明,一般大家都能整合到自己的网站上。

这就是ckplayer网页播放器的官网地址:http://www.ckplayer.com/

一开始我是觉得ckplayer能免费修改自己的logo,并且皮肤也很好看,看了下调用的方法发现很简单,就决定用它了,现在是越用越觉得好使。先展示下我整合到我的网站上的效果:

【展示效果】

【调整效果】

【分享效果】

发了这多效果图只是因为心里高兴,这一上午算是没白费。

我从官网上下了现在最新的版本v6.5,我记得我是从四点几开始用的。说实话,那时候确实还有很多地方没有符合我的需求,现在版本的基本上我的需求都能满足了。

为了防止以后在官网上找不到这个版本了,我放到云盘上让大家下载吧:ckplayer6.5版

我相信看了里面的demo和配置方法,你肯定会用了。我下面就介绍下我整合的时候用到的东西,先看我的代码:

html下的代码:

<div id="a1"></div>
<input id="hidInfoId" type="hidden" runat="server" value="szcbb" />

<script type="text/javascript" src="/Video/Js/offlights.js"></script>
<script type="text/javascript" src="/Video/Ckplayer/ckplayer.js" charset="utf-8"></script>

<script type="text/javascript">
  var flashvars={
    f:‘/Video/Url.aspx?id=[$pat]‘,//视频地址
    a:document.getElementById("hidInfoId").value,//调用时的参数,只有当s>0的时候有效
    s:‘1‘,//调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)
    c:‘0‘,//是否读取文本配置,0不是,1是
    my_url:window.location.href
   };
  var params={bgcolor:‘#FFF‘,allowFullScreen:true,allowScriptAccess:‘always‘};//这里定义播放器的其它参数如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互
  var video=[‘‘];
  CKobject.embed(‘/Video/Ckplayer/ckplayer.swf‘,‘a1‘,‘ckplayer_a1‘,‘642‘,‘615‘,false,flashvars,video,params);

  //开关灯
  var box = new LightBox();
  function closelights(){//关灯
    box.Show();
    CKobject._K_(‘a1‘).style.width=‘642px‘;
    CKobject._K_(‘a1‘).style.height=‘615px‘;
    CKobject.getObjectById(‘ckplayer_a1‘).width=642;
    CKobject.getObjectById(‘ckplayer_a1‘).height=615;
  }
  function openlights(){//开灯
    box.Close();
    CKobject._K_(‘a1‘).style.width=‘642px‘;
    CKobject._K_(‘a1‘).style.height=‘615px‘;
    CKobject.getObjectById(‘ckplayer_a1‘).width=642;
    CKobject.getObjectById(‘ckplayer_a1‘).height=615;
  }
</script>

注意:

1.红色标注的地方是要换成你的项目里的地址

2.蓝色标注的地方是为了实现视频地址隐藏不暴露才这么弄的。其中从url.aspx页面下动态获取视频地址,所以f,a,s联合使用,f传入的id参数使用的就是a的值。

3.橘色标注的地方是为了实现分享功能下获取本网址地址,具体的分享功能就从这里看吧http://www.ckplayer.com/tool/#p_3_6_26

4.绿色标注的地方是表示视频的大小值

5.要实现开关灯功能要记得引用offlights.js文件

url.aspx.cs下的代码:

protected void Page_Load(object sender, EventArgs e)
{

  if (!string.IsNullOrEmpty(Request.QueryString["id"]))
  {
    //判断id的值获取相应的地址

    Response.Write("你的视频地址");
  }

注意url.aspx下的html代码要全部删除,因为需要返回的是纯地址,不能带有其它代码。页面上就剩下这些就中

还有一个地方要注意的就是分享功能的实现,要修改share.xml里的内容中的一些文件的路径。

其它就不写了,去官网看吧。

时间: 2024-10-10 23:35:39

ckplayer-超酷网页视频播放器的使用的相关文章

ckplayer,超酷网页播放器,用于集成在网站中的播放器

自己在工作中做了一个教学网站,点击左边课程,右边播放视频,经过源代码分析,用的就是这个播放器 网址:http://www.ckplayer.com/ 具体使用播放器网站上说的比较明白 div id="flashcontent"></div> <div id="video" style="position:relative;z-index: 100;width:600px;height:400px;"><div 

CKplayer 超酷Flv播放器演示

原文:CKplayer 超酷Flv播放器演示 源代码下载地址:http://www.zuidaima.com/share/1550463717100544.htm 在线视频播放,支持.mp4格式

flowplayer网页视频播放器事例详解--包含各种参数说明(自译)

flowplayer网页视频播放器事例详解--包含各种参数说明(自译) <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title></title>     <meta http-equiv="content-type" content="text/html; charset=UTF-8&

网页视频播放器代码大全 + 21个为您的站点和博客提供的免费视频播放器

推荐 使用 极酷 Web在线播放器. 网页中嵌入视频代码综合全然版 1.avi格式 代码片断例如以下: 程序代码 <objectid="video"width="400"height="200"border="0"classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"> <paramname="ShowDisplay"v

网页视频播放器插件源码

1.ckplayer插件视频播放器 2.Flash插件播放器 <object type="application/x-shockwave-flash" data="video/vcastr3.swf" width="800" height="454" id="vcastr3"> <param name="movie" value="video/vcastr3.

Bootstrap+Html5制作强大的网页视频播放器

在做视频管理系统时,我们的定位是做到类似土豆视频的功能.视频管理,当然播放是必不可少的.在做这个播 放页面的时候,也研究了一下土豆的播放器,土豆用的是自己做的.但由于我们目前的技术有限,于是想着从网上找 一个现成的插件,于是开始了播放器的技术选型. 我发现了一个好的插件叫Video.js,研究了一下.基本的播放没问题,但当需要动态传参播放视频的时候,该款 播放器却很难跟着我的思路走,参数动态传不进去.如果现在去研究内部的js,改动内部代码,时间不允许.于是迫 不得已,只能另换解决方案. 搜索一番

前端追着设计砍系列的9个超酷网页特效

俗话说啊,一入前端深似海啊,小编在入门前端之前,看见酷炫的网页效果,都会佩服一下设计师.直到入了前端这个坑,现在一点开网页或者是啥app,再看到这些脑袋里想的都是这些布局,动画特效是如何实现的,完全已经越过了美的观赏....这也算是职业病? 下面我们就来欣赏一些让前端攻城狮一看就想举起80米的大刀去追砍设计师的网页设计~ 的 看完上面的这些网页设计,有童鞋感慨,这才是前端啊,我们做那只能叫静态页面.....另外小编也十分想求一份源码膜拜膜拜.... via 优秀网页设计

HTML5 自制本地网页视频播放器

HTML5初试:本地视频用网页打开啦半个广告都可以没有,看来暴风什么的快要淘汰了. 视频格式还是有要求的,看来要备一个转码器. 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div style=&quo

网页视频播放器

以前公司项目用到大量的视频,慢慢找到一个可以自定义比较好的视频播放插件