视频播放插件ckplayer简介
网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放。
可调用flash也可以调用html5播放器:
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">var flashvars={f:'http://movie.ks.js.cn/flv/other/1_0.mp4',c:0,loaded:'loadedHandler'};var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>
CKobject.embed(
'flash播放器文件路径',
'容器ID',
'播放器的ID',
'宽度,可以是百分比',
'高度,可以是百分比',
优先调用设置,false=优先调用flash播放器,true=优先调用HTML5播放器
flash播放器的初始化参数,以及HTML5初始化参数,比如默认播放/暂停等设置,详细的可以参考【flashvars里各参数的说明】这一版块
HTML5视频播放地址,数组形式,详细的可参考HTML5视频调用的说明
)
只调用flash播放器:
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">var flashvars={f:'http://movie.ks.js.cn/flv/other/1_0.flv',c:0,b:1};var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>
CKobject.embedSWF('flash播放器路径',
'放置播放器的容器ID',
'播放器的ID',
'宽度,支持百分比',
'高度,支持百分比',
flashvars对象,初始化播放器参数,
相关的配置,如:背景色,是否允许全屏,是否允许交互,播放器是否透明
);
只调用HTML5播放器:
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">var flashvars={p:1,e:1};var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];var support=['all'];CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>
CKobject.embedHTML5('放置播放器的容器的ID',
'播放器ID',
'宽高,支持百分比',
'高度,支持百分比',
视频地址,数组,因为不同的平台支持的视频格式不同,所以需要尽量多的视频格式来兼容,
初始化配置参数,比如默认是否播放,
在哪些平台上使用,all是指全部平台都调用
);
其中flashvars中的参数如下:
/**
注意,flashvars中的参数:v:ckplayer_volume,视频默认音量 0-100 之间,默认为 85。p:ckplayer_play,是否自动播放,可以为 1 或 0,默认为 1,参数不为 1 时播放器加载完成后均为暂停状态。f:ckplayer_flv,视频地址,默认为空,可以是单独视频地址、url 地址列表文件、xml 地址列表文件、Flash 地址文件这四种情况。(注意对应修改 s 参数的值,即 ckplayer_style)i:ckplayer_loadimg,视频播放器初始图片地址,即封面图片,默认为空。d:ckplayer_pauseflash,暂停时播放的广告,只支持 Flash 和图片,默认为空。u:ckplayer_pauseurl,暂停时播放广告图片的链接地址,默认为空。l:ckplayer_loadadv,视频开始前播放的广告,可以是 图片/Flash/视频格式,默认为空。r:ckplayer_loadurl,视频开始前广告的链接地址,主要针对视频广告,如果是 Flash 广告可以不填写,默认为空。t:ckplayer_loadtime,视频开始前广告播放的秒数,只针对 Flash 或图片有效,默认为 0。e:ckplayer_endstatus,视频结束后的动作,0 停止播放并发送js,1 是不发送 js 且重新循环播放,2 停止播放,默认为2。当为 0 时需要自定义函数:function playerstop(){alert("播放完成");}a:ckplayer_pat,只有在使用 Flash 加密地址传递时有效,需要 f 和 s 参数配合,以及你自定义的 geturl.swf 文件配合,f:ckplayer_flv 参数也可以为 getflv.php?id=[$pat] 这样的格式,相当于 Flash 加密地址传递,其中的 pat 是有效的,可以通过这里传递参数后得到视频播放地址给播放器。s:ckplayer_style,f 参数的传递方式,0 是普通视频地址,1 是视频地址列表文件,2 是 xml 地址列表文件,3 是 Flash 加密地址解析,默认为 0 普通视频地址文件播放。x:ckplayer_xml,皮肤配置文件,如果为空的话将使用 js 文件配置,默认为官方皮肤 ckplayer.xml,要修改为其他皮肤只需要下载后改这个文件名就可以了,比如网易皮肤 ckplayer_163.xml。c:ckplayer_default,读取文本配置,此参数具有非常强大的功能,非 0 值时调用本地 ckplayer.txt 配置文件(比如外站引用视频只需一个参数即可)说来话长,请到网站了解详情。b:ckplayer_bgcolor,该参数以适应站外调用时有些论坛自动设置透明度的问题。h:ckplayer_http,默认为0,定义 http 视频流采用按关键帧拖动还是按关键时间点拖动,0是按关键帧,1是按关键时间点。m:ckplayer_load,默认为0,为1时不自动加载视频,选择是否采用点击播放按钮时再加载视频,这个参数的功能是在同页面加载多个视频时,有些视频可以先不加载,省带宽。g:ckplayer_start,默认为0,开头跳过时间,这两个参数可以定义按指定时间进行播放的功能和提前结束的功能,该功能的用处一是可以记录用户已播放到的时间下次打开该视频时直接从指定时间进行播放,二是可以做跳过片头和片尾的功能。j:ckplayer_ending,同上,默认为0,提前结束时间。o:附加参数,非 CKplayer 官方参数,可选,默认值为 0,当值为 1 时,可加载站外视频 Flash 地址,如优酷分享中的 Flash 地址等,相当于使用 <embed> 标签加载站外 Flash 视频。
**/
下面贴一个实例代码:
html代码:<div id="video_c"></div>
css代码:#video_c{ width:840px; height:353px;margin:0 auto;}
js代码:<script type="text/javascript" src="ckplayer/ckplayer.js"></script>
<script type="text/javascript">var flashvars={f:'ckplayer/video/1_0.flv',p:0//i:'http://www.ckplayer.com/static/images/letitgo.jpg' //视频播放器初始图片地址,即封面图片,默认为空。};
var video=['ckplayer/video/1_0.mp4->video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf','video_c','ckplayer_a1','100%','100%',false,flashvars,video);</script>
示例2:
/*** 视频播放*/function videoPlay() {var videoUrl = $('.video-player').attr('data-url'),videoWidth = $('.video-player').attr('width') || '500',videoHeight = $('.video-player').attr('height') || '400';// 定义视频播放区域$('.news-content').append('<div id="a1"></div>')$('#a1').addClass('text-center');// ckplyaer视频播放参数设置var flashvars={// f:'http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4',f: videoUrl, // 视频地址c:0,b:1,i:'' // 视频封面};var params = {bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};CKobject.embedSWF('<%= PLUGINS_PATH %>' + 'ckplayer/ckplayer.swf','a1','ckplayer_a1', videoWidth, videoHeight, flashvars, params);// $('#al').css('text-align', 'left');};
<script src="<%= PLUGINS_PATH %>ckplayer/ckplayer.js"></script>
注:如果是flash播放优先,如果flashvars的属性p的值为0时,表示为暂停状态,点击播放按钮时,屏幕中间的播放按钮不会消失,需要放到环境里面查看效果,就不会出现该情况。
如果有需求去掉ckplayer播放器右边的开关灯分享插件,会有专门的文章整理出来关于去掉该插件的,该百度网盘中已经是去掉播放器右边的开关灯分享插件的。
参考地址:
ckplayer官网:http://www.ckplayer.com/
参数介绍链接:http://www.fufuok.com/demo/ck...
视频播放插件ckplayer简介相关推荐
- 网页视频播放插件ckplayer的使用-详细介绍
ckplayer插件下载地址:http://pan.baidu.com/s/12HYH4(如果不在了,自己找地址下载,下载后添加到网站根目录) ******特别提醒:解压后不要忘了把js文件夹也添加到 ...
- embedv.php_PHP与视频播放插件功能实现,非常简单
PHP与视频播放插件功能实现,非常简单 龙行 PHP 2018-8-28 2579 0评论 最近在研究maccms所以会接触到这个ckplayer播放器,那么如何 php与视频 ...
- 【Android 插件化】插件化简介 ( 组件化与插件化 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- web视频播放插件:Video For Everybody
相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...
- unity android 播放器,Unity3D 安卓视频播放插件 WRP Android Video Player Pro
通过这个安卓视频播放插件,你可以在你的Unity3D 项目中针对很容的播放视频. Easily play videos in your Unity Android Projects with this ...
- 【Unity3D插件】AVPro Video插件分享《视频播放插件》
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给 ...
- vue 视频播放插件VideoPlayer
vue 视频播放插件VideoPlayer 1.npm install vue-video-player --save 2.main.js引入 import VideoPlayer from 'vue ...
- Vue之引用第三方JS插件,CKPlayer使用
前言: 不管是VUE还是Angular,有时候我们需要使用到一些js插件,但是的源库中并没有相应的插件包,这个时候我们需要如何引入并且使用呢?这个问题其实非常简单,接下来我以VUE为例写给大家介绍一下 ...
- 跟我一步一步实现 Flutter 视频播放插件 (一)
当团队准备着手做 APP 时,我们把目标对准了 Flutter,尤其近期 Flutter 的使用热度一直不断攀升.由于第一次使用 Flutter,就想通过自己的实践去提升自己的能力. 在做 APP 时 ...
- Android插件化原理和实践 (一) 之 插件化简介和基本原理简述
1 插件化简介 Android插件化技术是一种这几年间非常火爆的技术,也是只有在中国才流行起来的技术,这几年间每每开发者大会上几乎都会提起关于插件化技术和相关方向.在国内各大互联网公司无不都有自己的插 ...
最新文章
- pycharm中的terminal解释器和project 解释器不统一问题
- 不好意思朋友们,前段时间都没来过,工作忙!
- dig下载_DIG的完整形式是什么?
- 用于将类型从double转换为int的C#程序
- php多个表中查找数据_HeidiSQL 免费的可视化数据库管理工具
- JAVA 可视化日历
- UI设计师缺乏灵感,看看这些可以临摹的网站架构!
- 小白设计模式:访问者模式
- python加减乘除符号_Python项目如何合理组织规避import天坑
- Java: Queue
- POJ 1696 Space Ant(点积的应用)
- SU插件情报局 | 坯子助手工具详解
- matlab2010a中文,MATLAB 2010a解决中文字体乱码的方法
- Flutter环境搭建、运行gallary项目
- 高恪智能流控怎么设置_磊科285G智能QoS与高恪K2P智能流控多用户对比评测(下, 多用户对比测试)...
- 每天一剂 WebView 良药
- 【Linux】-- 基本指令
- Node.js 任务队列Bull的源码浅析
- MFC识别XBox游戏手柄,并进行UI界面开发
- ECALL Switch/Ordinary模式
热门文章
- linux 的截屏软件下载,Linux 截屏软件 Shutter
- Java之将GB2312编码转化为汉字
- 常用的linux技巧,Linux Shell常用技巧(十二)-第二部分
- Java Web 2.1.4 HTML 表单标签与表单设计 (实例)
- python中返回上一步操作的快捷键_在计算机中返回上一步的快捷键
- Windows10开启电脑卓越性能模式,运行速度提升10%,CUP利用率达到50%
- 学习笔记(26):NumPy数据分析-NumPy 统计函数-var方差
- Python学习(52周存钱)
- android外设按键,Android 外接键盘的按键处理 .
- VS生成的C++项目常用目录设置