今天在工作的过程中遇到一个功能:在网页中加入视频播放器,类似于我们经常看到的优酷,爱奇艺等视频网站的功能。

ckplayer(官网:http://www.ckplayer.com/)是一款在网页上播放视频的免费的播放器,功能强大,体积小巧,使用起来随心所欲。

注意上面的红色框:请注意:播放器上的任何元素都可以换成您自己的!(在开发过程中,你回发现ckplayer的注释写的是很完全的,这个值得赞一下....)

不管这么多了,先来看看效果图吧:

1.这是播放前的广告

2.这是播放的视频

3.暂停界面

4.调整功能界面

5.分享功能界面

6.关灯功能界面

看到这里,你是不是也想动手试试,做出自己的网页播放器。

开始动手:

==================================================================================

前期准备:

1.下载ckplayer,这里下载    推荐完整版

下载地址:http://www.ckplayer.com/bbs/forum.php?mod=viewthread&tid=423

下载完成后,解压缩:

我们只需要下面红色部分文件:

2.项目结构:

3.在一个html页面中加入这些代码:

1 <divid="flashcontent"></div>
2  <divid="video"style="position:relative;z-index: 100;width:600px;height:400px;"><divid="a1"></div></div>
3 <scripttype="text/javascript"src="ckplayer/ckplayer.js"charset="UTF-8"></script>
4 <scripttype="text/javascript"src="js/offlights.js"charset="UTF-8"></script>
5 <scripttype="text/javascript">
6   //以下为调用播放器的标准代码
7  varflashvars={8 f:'http://movie.ks.js.cn/flv/2011/11/8-1.flv',//视频地址
9 a:'',//调用时的参数,只有当s>0的时候有效
10 s:'0',//调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)
11 c:'0',//是否读取文本配置,0不是,1是
12 x:'',//调用xml风格路径,为空的话将使用ckplayer.js的配置
13 i:'',//初始图片地址
14 d:'http://www.ckplayer.com/temp/11.jpg',//暂停时播放的广告,swf/图片
15 u:'http://www.baidu.com',//暂停时如果是图片的话,加个链接地址
16 l:'http://www.ckplayer.com/down/start.swf',//视频开始前播放的广告,swf/图片/视频
17 r:'',//视频开始前播放图片/视频时加一个链接地址
18 t:'1',//视频开始前播放swf/图片时的时间
19 e:'3',//视频结束后的动作,0是调用js函数,1是循环播放,2是暂停播放,3是调用视频推荐列表的插件
20 v:'85',//默认音量,0-100之间
21 p:'1',//视频默认0是暂停,1是播放
22 h:'1',//播放http视频流时采用何种拖动方法,0是按关键帧,1是按关键时间点
23 q:'',//视频流拖动时参考函数,默认是start
24 m:'0',//默认是否采用点击播放按钮后再加载视频,0不是,1是,设置成1时不要有前置广告
25 g:'',//视频直接g秒开始播放
26 j:'',//视频提前j秒结束
27 k:'10|40|80',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字
28 n:'跳过开头|小企鹅宝宝下水了|跳过结尾',//提示点文字,跟k配合使用,如 提示点1|提示点2
29 b:'0x000',//播放器的背景色,如果不设置的话将默认透明
30 w:'',//指定调用自己配置的文本文件,不指定将默认调用和播放器同名的txt文件
31       //调用播放器的所有参数列表结束
32       //以下为自定义的播放器参数用来在插件里引用的
33 my_title:'视频标题',//视频标题
34 my_url:'http://www.ckplayer.com/index.php',//本页面地址
35 my_summary:'这是一个测试页面',//视频介绍,请保持在一行文字,不要换行
36 my_pic:'http://www.ckplayer.com/temp/11.jpg'//分享的图片地址
37       //调用自定义播放器参数结束
38 };39 varparams={bgcolor:'#000000',allowFullScreen:true,allowScriptAccess:'always'};//这里定义播放器的其它参数如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互
40 varattributes={id:'ckplayer_a1',name:'ckplayer_a1'};41 //下面一行是调用播放器了,括号里的参数含义:(播放器文件,要显示在的div容器,宽,高,需要flash的版本,当用户没有该版本的提示,加载初始化参数,加载设置参数如背景,加载attributes参数,主要用来设置播放器的id)
42 swfobject.embedSWF('ckplayer/ckplayer.swf','a1','600','400','10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes);//播放器地址,容器id,宽,高,需要flash插件的版本,flashvars,params,attributes
43 //调用播放器结束
44 //第一部分:开关灯
45 varbox= newLightBox('flashcontent');46 var$=function(id){returndocument.getElementById(id)};47 functioncloselights(){//关灯
48 box.Show();49 $('video').style.width='940px';50 $('video').style.height='550px';51 swfobject.getObjectById('ckplayer_a1').width=940;52 swfobject.getObjectById('ckplayer_a1').height=550;53 }54 functionopenlights(){//开灯
55 box.Close();56 $('video').style.width='600px';57 $('video').style.height='400px';58 swfobject.getObjectById('ckplayer_a1').width=600;59 swfobject.getObjectById('ckplayer_a1').height=400;60 }61 </script>

4.大功告成。。。。。

如果有不清楚的地方,请参考:

功能介绍: http://www.ckplayer.com/view.php?id=1

帮助手册:  http://www.ckplayer.com/article.php?id=1

使用实例[js篇] :http://www.ckplayer.com/article.php?id=2

http://www.cnblogs.com/hongten/archive/2012/10/31/javascript_ckplayer.html

http://www.ckplayer.com/

ADRESS FORM:http://qianxunniao.iteye.com/blog/1988449

网页上播放视频的免费的播放器_CKPlayer相关推荐

  1. 教你如何将网页上的视频下载到手机

    我们有时我们在网上看到了一个自己感兴趣的视频,想要把它下载到手机上以后慢慢再看, 此时可以利用浏览器,可以轻松地把网页视频下载到我们的手机上. 首先我们下载UC浏览器最新版本: 下载地址:http:/ ...

  2. 使用IJKPlayer播放视频实现了一些播放视频的基本操作

    使用IJKPlayer播放视频实现了一些播放视频的基本操作 Iijkplayer目前是很流行的音视频框架,集成我这里就不多说了,网上很多,大概就是编译ijkplayer的源码得到里边的so文件,添加到 ...

  3. PPT放映时无法自动播放视频,同时自动播放两个视频

    PPT放映时无法自动播放视频,同时自动播放两个视频 选中视频,设置为自动播放模式 如果放映时仍不能自动播放 文件→选项→高级→显示 将"禁用幻灯片放映硬件图形加速"勾选 同时播放两 ...

  4. 【下载网页上的视频】IDM显示无法将下载行为传输到IDM

    安装了绿化版的IDM来下载网页上的视频,非常好用,但是下载之后却显示无法将下载行为传输到IDM. [解决办法]下载之前进行配置:运行IDM,下载-选项-常规下进行设置: 常规设置-勾选接管所有浏览器下 ...

  5. 一款Github工具包-快速下载网页上的视频

    导读:今天给大家推荐一款优秀的Github工具包,可以让您快速下载网页上的视频. You-get 项目主页:https://github.com/soimort/you-get/wiki/中文说明#i ...

  6. Python如何下载网页上的视频

    Python如何下载网页上的视频 1.在电脑上创建一个文件夹 2.在文件夹里输入cmd 3.回车 4.输入 pip install you-get 回车 5.输入you-get 自己喜欢的视频链接 回 ...

  7. 优酷复制的html代码怎么用,关于网页上增加视频功能的代码

    在开发网站上时候,不知道怎么在自己的网站上增加视频播放功能.后来找了许多资料,不管怎么说,还是在自己的网站上挂上了视频页面及播放窗口,尽管很小白,记录下来,以成长精进之用. 1直接利用优酷代码 先复制 ...

  8. 计算机无法播放视频,电脑自带播放器无法播放视频怎么办

    可能很多小伙伴观看视频的时候都是选择在网页上进行浏览,不过如果有下载视频的话,基本都是用系统自带的播放器进行播放视频.那如果自带播放器无法播放视频怎么办呢?现在一起看看详细的解决方法吧. 方法/步骤: ...

  9. Android浏览器自动播放视频,HTML 5自动播放谷歌浏览器Android不播放

    我试图在用户在浏览器中打开网页时自动播放视频.在我的笔记本电脑上,自动播放适用于所有浏览器,但在Android上,它不适用于谷歌浏览器,在iphone中,它不适用于Safari浏览器.我已经做了一个搜 ...

最新文章

  1. 速来!亚马逊云科技AI盛会开源专场吹响集结号
  2. css设定div固定比例,响应式网页中,如何只用CSS实现div的高和宽保持固定比例
  3. Linux之grep
  4. kubectl 创建pvc_动态挂载云盘(PVC)
  5. php-css外边距
  6. (转)git遇到的问题之“Please make sure you have the correct access rights and the repository exists.”...
  7. 数据流被污染?数据质量不高?蚂蚁金服数据资产管理平台了解一下
  8. python 如何封装dll_python怎么封装dll
  9. ENVI入门系列教程---一、数据预处理---4.1 遥感图像正射校正
  10. ASP.NET网络版进销存管理系统源码【源码免费分享】
  11. 监管大屏系统_国网信息运维综合监管系统及大屏可视化平台建设介绍
  12. 找不到驱动程序类,加载驱动失败,连接数据库失败
  13. w ndows10图标,win10桌面图标变白怎么解决
  14. 不做无用功 Google Colab掉线自动重连“助手”
  15. Tikz教程:一个异步FIFO设计步骤示意图的画法
  16. 【动态规划dp】青蛙的烦恼(frog)
  17. Java细枝末节:运算符优先级表
  18. Linux环境下静默安装oracle12cR2
  19. 003 免格式化U盘部署PE(UEFI)
  20. 无语:SEGA开发尿尿游戏 仅供男性专用

热门文章

  1. HCIE--路由交换--IGP部分实验详解
  2. 十二章 Python入门系列之字典
  3. c语言输出行末无空格_三个简单的C语言程序
  4. 在python中读取文件时如何去除行末的换行符以及在Windows与Linux中的区别
  5. PowerPoint2003常用快捷键
  6. SpringBoot整合极光推送
  7. 美国伊利诺伊州疫情数据分析
  8. python调用R语言
  9. KaLi Linux 2019.2安装netspeed
  10. 试图加载格式不正确的程序 解决方法