分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !

博客分类: Javascript /Jquery / Bootstrap / Web

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

功能设置介绍

本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容:
  • 1:修改或去掉播放器前置logo
  • 2:修改或去掉右上角的logo
  • 3:修改、关闭、设置滚动文字广告
  • 4:去掉右边的开关灯分享插件
  • 5:保留右边插件,但不用开关灯
  • 6:分享功能的使用及注意点
  • 7:前置广告顺序/随机播放或随机播放多个广告中的一个
  • 8:让控制栏永远隐藏
  • 9:锁定进度栏,让它跟着时间变化而变化,但是不能拖动
  • 10:让视频离播放器下方的距离为0
  • 11:视频加载失败时的提示文字和文字的位置设置
  • 12:禁止用户拖动进度条

修改或去掉播放器前置logo

第 一步:把ckplayer/目录下的style.swf修改成style.zip,把自己做好的logo文件,官方默认使用的logo.swf,你也可以 使用logo.png.logo.jpg图片格式的,拖进style.zip里,然后再把style.zip改回style.swf
第二步:打开ckplayer.js和ckplayer.xml

第一种:不使用前置logo
找到(ckplayer.js)mylogo: 'logo.swf',
ckplayer.xml里对应的是<mylogo>logo.swf</mylogo>

分别设置成

mylogo:'null',
<mylogo>null</mylogo>

第二种:修改前置logo

找到(ckplayer.js)mylogo: 'logo.swf',
ckplayer.xml里对应的是<mylogo>logo.swf</mylogo>

替换成你的logo的名称

找到(ckplayer.js)pm_mylogo: '1,1,-100,-55',
ckplayer.xml里对应的是<pm_mylogo>1,1,-100,-55</pm_mylogo>

这里是修改位置的,关于修改位置的四个参数的作用和用法请参考:

修改后一定要清浏览器的缓存

修改或去掉右上角的logo

第 一步:把ckplayer/目录下的style.swf修改成style.zip,把自己做好的logo文件,官方默认使用的cklogo.png,你也 可以使用cklogo.swf(flash格式)或cklogo.jpg(图片格式)的,拖进style.zip里,然后再把style.zip改回 style.swf

第二步:打开ckplayer.js和ckplayer.xml

第一种:不使用logo
找到(ckplayer.js)logo: 'cklogo.png',
ckplayer.xml里对应的是<logo>cklogo.png</logo>

分别设置成

logo:'null',
<logo>null</logo>

第二种:修改logo
找到(ckplayer.js)logo: 'cklogo.png',
ckplayer.xml里对应的是<logo>cklogo.png</logo>

替换成你的logo的名称

找到(ckplayer.js)pm_logo: '2,0,-100,20',
ckplayer.xml里对应的是<pm_logo>2,0,-100,20</pm_logo>

这里是修改位置的,关于修改位置的四个参数的作用和用法请参考

修改后一定要清浏览器的缓存

修改、关闭、设置滚动文字广告

关闭滚动文字广告的方法很简单

打开ckplayer.js和ckplayer.xml

找到setup:''参数和<setup></setup>

第9个参数设置成0就可以关闭了

第9个参数的意思如下:

是否开启滚动文字广告,0是不开启,1是开启且不使用关闭按钮,2是开启并且使用关闭按钮,开启后将在加载视频的时候加载滚动文字广告

使用(修改)滚动文字广告

前提是你需要开启滚动文字广告,开启的方法如上面所说的

第一种方法:在ckplayer.js或ckplayer.xml里修改滚动文字广告

然后找到ckplayer.js中的advmarquee:'',

或ckplayer.xml中的<advmarquee></advmarquee>

修改里面的内容,注意在ckplayer.xml里修改文字广告可以使用html语法,但是要注意的是把"<"换成"{",">"换成"}"

第二种方法:在页面里实时展示文字广告

首先要把ckplayer.js中的advmarquee:''里的内容清空(对应的ckplayer.xml里的也清空)

然后在调用播放器的页面里设置一个js函数供播放器调用,代码如下:

Js代码  收藏代码
  1. <script>function ckmarqueeadv(){return '广告内容';}</script>

这里的 ckmarqueeadv函数也可以换成别的函数,修改方法是在ckplayer.js中的ckstyle()中的 calljs参数(ckplayer.xml里也有对应的)

修改后一定要清浏览器的缓存

文字向上滚动的方法设置

要注意二点:

一:ckplayer.js中的ckstyle()函数里的pm_advmarquee参数(ckplayer.xml里对应的是<pm_advmarquee></pm_advmarquee>)

该参数的第10个值设置成1,就可以实现向上或向下滚动了

第6个值和第13个值要保持一致,你可以先设置成16测试一下

二:设置文字广告时需要在前面增加一个{br}换行符号,如{br}1{br}2

去掉右边的开关灯分享插件

ckplayer.js里

找到下面三行删除掉

cpt += 'right.swf,2,1,-75,-100,2,0|';//右边开关灯,调整,分享按钮的插件
cpt += 'share.swf,1,1,-180,-100,3,0|';//分享插件
cpt += 'adjustment.swf,1,1,-180,-100,3,0|';//调整大小和颜色的插件

ckplayer.xml里找到下面三行删除掉

<cpt>right.swf,2,1,-75,-100,2,0</cpt><!--右边开关灯,调整,分享按钮的插件-->
<cpt>share.swf,1,1,-180,-100,3,0</cpt><!--分享插件-->
<cpt>adjustment.swf,1,1,-180,-100,3,0</cpt><!--调整大小和颜色的插件--

再到style.swf(改成style.zip)里把right.swf,share.swf,adjustment.swf这三个插件删除掉

保留右边插件,但不用开关灯

ckplayer.js里:cpt_lights:'0',

ckplayer.xml里:<cpt_lights>0</cpt_lights>

修改后一定要清浏览器的缓存

分享功能的使用及注意点

我们假设你的ckplayer是放在网站根目录下的,比如你的播放器地址是
http://www.你的域名.com/ckplayer/ckplayer.swf    
注意这个路径

下面开始设置
第一步:
http://www.你的域名.com/ckplayer/ckplayer.js中找到cpt_share:''参数
改成cpt_share:'http://www.你的域名.com/ckplayer/share.xml',

http://www.你的域名.com/ckplayer/ckplayer.xml中找到<cpt_share></cpt_share>
改成
http://www.你的域名.com/ckplayer/share.xml

 

第二步:
打开http://www.你的域名.com/ckplayer/share.xml这个文件
找到参数里面的
{embed src="http://www.你的域名.com/ckplayer/ckplayer.swf"
注意这里要设置成绝对路径

http://www.你的域名.com/ckplayer/ckplayer.swf?[$share]
 这里也要用绝对路径

<share_path>ckplayer/share/</share_path>
改成绝对地址    
 <share_path>http://www.你的域名.com/ckplayer/share/</share_path>
 主要就是改路径为http开头的路径,因为站外访问必需要有全路径才能识别

<share_permit>0</share_permit>
设置好该参数,如果你的视频站没有视听许可证,则设置成0,如果有,则设置成1

<share_flashvars>
 f,my_url,my_pic,a
 </share_flashvars>
share_flashvars参数的功能是指分享时,分享出去的flashvars里的参数,这里一定要注意,因为根据你调用视频的方式,需要选择不同的参数分享,已确保在站外再一次分享时还是能够播放的。

 

第三步:  
给网站增加一个跨域策略文件,关于这个文件的说明可以自已baidu一下 
简单的使用就是下载官网的直接放到自己网站根目录下 
http://www.ckplayer.com/crossdomain.xm

修改后一定要清浏览器的缓存

前置广告顺序/随机播放或随机播放多个广告中的一个

第一步,你的前置广告要设置成多个广告地址的形式

比如你的广告地址是1.swf和2.flv

那么设置方式如下

在flashvars里的代码(其它形式的调用只要对应就行了)

Js代码  收藏代码
  1. var flashvars={
  2. ...
  3. l:'1.swf|2.flv',
  4. r:'|http://www.ckplayer.com',
  5. t:'10|10',
  6. ...
  7. };

l的值里放了二个广告,以竖线隔开

因为2.flv是视频,需要给它个链接地址所以在r里设置了一个空的地址和一个链接地址(以官网地址为例),中间以竖线隔开

t是设置的播放时间,都是10秒,共放20秒

第二步,打开ckplayer.js找到setup:''这个参数,或打开ckplayer.xml找到<setup></setup>这个参数

注意第7个参数

这里的设置有3+种。不同的设置不同的意思

0:是把多个前置广告设置成顺序播放

1:是把多个前置广告设置成随机的顺序播放

2:随机取所有广告中的一个进行播放

3:随机取所有广告中的二个进行播放

...

以此类推

让控制栏永远隐藏

找到

ckplayer.js中的setup:''的第29个参数

ckplayer.xml中的<setup></setup>的第29个参数

设置成2

该参数的意思法

0:是正常状态,此时控制栏将会根据setup中的第25个参数来运行。

1:是控制栏默认隐藏,播放状态下鼠标经过播放器显示控制栏,此时只有当鼠标经过播放器时,控制栏才会出来,至后会按照setup的第25个参数来运行

2:是一直隐藏控制栏

锁定进度栏,让它跟着时间变化而变化,但是不能拖动

找到

ckplayer.js中的setup:''的第26个参数

ckplayer.xml中的<setup></setup>的第26个参数

设置成0

让视频离播放器下方的距离为0

style.swf改成style.zip

把里面的style.xml文件拖出来打开

找到

<pm_video>0,0,0,35,0x000000,0,0,0,0,0</pm_video>
设置第四个参数(上面的是35),设置成0

这个参数里各个值的意思如下
视频固定区域
1、控制栏未隐藏时左边预留宽
2、控制栏未隐藏时上面预留高度
3、控制栏未隐藏时右边预留宽度
4、控制栏未隐藏时下面预留高度
5、该区域背景颜色
6、该区域背景透明度
7、控制栏隐藏时左边预留宽
8、控制栏隐藏时上面预留高度
9、控制栏隐藏时右边预留宽度
10、控制栏隐藏时下面预留高度

视频加载失败时的提示文字和文字的位置设置

修改文字在:language.xml里的<pr_noload>{font color='#FFFFFF' face='NSimSun'}加载失败{/font}</pr_noload>项

修改文字位置是在style.swf(改成style.zip)里的style.xml里的<pm_load>1,1,-30,10,0,200,0</pm_load>

因为该处是用来显示加载进度,兼职显示加载失败的提示文字的。各值的意思如下:

1、水平对齐方式,0是左,1是中,2是右
2、垂直对齐方式,0是上,1是中,2是下
3、水平偏移量
4、垂直偏移量
5、文本对齐方式:0是左对齐,1是中间对齐,2是右对齐,3是默认对齐(相当于左对齐)
6、文本框的宽,只有在左/右对齐时有效
7、文本框的高

特别说明:在所有关于文本的控制中,只有设置了左右对齐,后面的宽度才会有效果,如果设置的中间对齐,则宽度无效果

禁止用户拖动进度条

打开ckplayer.js搜索:setup

打开ckplayer.xml搜索:setup

修改该参数的第36个值为0。

来源:http://www.ckplayer.com/article6.php?id=15

官网:http://www.ckplayer.com/

安装:http://www.ckplayer.com/article6.php?id=14

实例:http://www.ckplayer.com/ex6.php?id=33

  • ckplayer6.4.zip (322.3 KB)
  • 下载次数: 132
分享到:  
免费轻量级网页播放器f4player, flv, f4v, ... | php gizp压缩传输js和css文件 - PHP
  • 2014-08-28 02:47
  • 浏览 25362
  • 评论(2)
  • 分类:Web前端
  • 相关推荐
参考知识库
Git知识库272  关注 | 304  收录
jQuery知识库440  关注 | 232  收录
大型网站架构知识库1225  关注 | 532  收录
AngularJS知识库591  关注 | 262  收录
评论
2 楼 天梯梦 2015-02-07  
hero1982 写道
请教您一下。您这组压缩包视频代码,如何应用到页面呢?

直接导入js和css,然后复制核心代码就可以了。你可以看一下demo page:http://www.ckplayer.com/article/19.htm  应该是很容易的!

1 楼 hero1982 2015-02-06  
请教您一下。您这组压缩包视频代码,如何应用到页面呢?

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

开源ckplayer 网页播放器, 跨平台 html5 mobile ,flv f4v mp4 rtmp协议相关推荐

  1. 开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !

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

  2. 开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !...

    CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格 式播放,此播放器的特点在于用户可以自己 ...

  3. 开源ckplayer 网页播放器去logo去广告去水印修改

    功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...

  4. html网页播放器fl,Html5弹幕视频播放器插件

    如何使用 Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件. 接下来,在body中需要放置播放器的位置加入如下代码: 最后,关键的部分,配置参数,调用插件. $(& ...

  5. 手机网页播放器php,html5手机移动端视频播放代码插件

    js代码 //document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden'; zyme ...

  6. 无效的m3u8怎么办_求教: 用 ckplayer 网页播放 m3u8 的直播无法播放,是什么问题?...

    用 ckplayer 网页播放器做一个 m3u8 格式的劲爆体育直播,能在移动设备看, 但不能在电脑网页看,怎么回事? 地址: http://www.bddn.cn/demo8.htm 网页主要代码如 ...

  7. 如何将embed嵌入式Flash网页播放器替换为CKplayer

    工作中,经常遇到CMS里内嵌的使用embed标签的Flash网页播放器,这些播放器交互性差.不好用,但是因为embed标签往往已通过富文本编辑器写入了数据库的内容字段,很难去改写.如何在不改变数据库的 ...

  8. 挑选几款开源的、优秀的H.265网页播放器,进行特征整理及使用评价

    H265和H264都是视频编码规范,H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少.之前由于终端支持有限,h265的推广使用 ...

  9. html5的在线播放页面,整理5款html5网页播放器,总有一款适合你吧

    整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...

最新文章

  1. 事件相机特征跟踪-模板跟踪方法
  2. LINQ to Entities 基于方法的查询语法
  3. 关于fatal error LNK1120: 1 unresolved externalsd而解决方法
  4. springboot集成Apollo分布式配置
  5. 什么是设计模式(Design Patterns)
  6. 总结C语言中的数组知识点
  7. 前端学习(1354):集合关联
  8. Python稳基修炼的经典案例5(计算机二级、初学者必须掌握的例题)
  9. hdu 1698 Just a Hook(线段树区间修改)
  10. 无线传感器网络与数据交换解析
  11. w ndows模拟器,iPad 模拟器 模拟器(windows - iPadian)
  12. python django文档_翻译:Django官方文档-前言
  13. MATLAB textscan之模式匹配用法
  14. linux perl环境搭建,Perl 环境安装
  15. react图片剪裁react-cropper
  16. 哈佛大学幸福课笔记二
  17. 华为harmonyos2.0哪里下载,华为HarmonyOS最新官方版-华为HarmonyOS2.0最新下载地址-游侠软件下载...
  18. 迅雷播放插件下载的在线字幕位置
  19. 人工智能在物联网项目中的应用
  20. 享元模式(Flyweight模式)

热门文章

  1. 【转】共享经济是临时工的增量市场?
  2. AttributeError module ‘seaborn‘ has no attribute ‘tsplot‘
  3. 网页无插件直播视频平台EasyNVR老版本更新版本后CPU占用过高怎么解决?
  4. html5 微信原生登录,用HTML5实现微信密码输入框
  5. 16位汇编编译报错和解决办法
  6. 树莓派(Raspberry Pi)中如何改变键盘布局(打出~ # | 等符号)
  7. 类与对象(中) 构造函数和析构函数
  8. 联想R720 bios版本回退
  9. RocketMQ 大神丁威亲述参与开源社区的方式
  10. linux mount u盘 exfat,Linux Centos mini挂载exfat或nfs格式的u盘