ckplayer插件播放视频
官网:超酷网页视频
本篇介绍:插件播放视频, 添加插件(额外的功能), 视频格式之间的转换
PC端一般都是利用插件(Flash)来播放视频,可以支持很多格式。网上很多说这个插件的,这里只是做个记录。
下载好,移动到我们的项目,开始测试。因为里面的功能有点多,你可以去看文档完成自己需要的需求,这里只是简单的记录。
我们PC一般会存放FLV格式视频,而MP4则使用与很多场景。 FLV体积小,速度快这也是为什么网站都选选择使用这个格式。
最简单的版本:
微信内置网页中用这种方式在Android里面是可以播放FLV和Mp4格式。
<div id="a1"></div> <%--视频的位子--%>
<script src="jquery-1.11.2.min.js"></script>
<script src="ckplayer/ckplayer.js"></script> <%--插件JS--%>
<script type="text/javascript"> //初始化视频容器
initCKPlayer('a1', '/Video/1_0.mp4', '/ckplayer/ckplayer.swf');
//初始化视频播放器需配合ckplayer.js使用
function initCKPlayer(boxId, videoSrc, playerSrc) {
var flashvars = {
f: videoSrc,
c:
};
var video = [videoSrc];
CKobject.embed(playerSrc, boxId, 'video_v1', '', '', true, flashvars, video); //false表示插件,true表示HTML标签播放,如果不是video所支持的类型不会显示
}
</script>
常用对象属性。
f:'http://movie.ks.js.cn/flv/2011/11/8-1.flv',//视频地址
a:'',//调用时的参数,只有当s>0的时候有效
s:'',//调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)
c:'',//是否读取文本配置,0不是,1是
x:'',//调用xml风格路径,为空的话将使用ckplayer.js的配置
i:'',//初始图片地址
d:'http://www.ckplayer.com/temp/11.jpg',//暂停时播放的广告,swf/图片
u:'http://www.baidu.com',//暂停时如果是图片的话,加个链接地址
l:'http://www.ckplayer.com/down/start.swf',//视频开始前播放的广告,swf/图片/视频
r:'',//视频开始前播放图片/视频时加一个链接地址
t:'',//视频开始前播放swf/图片时的时间
e:'',//视频结束后的动作,0是调用js函数,1是循环播放,2是暂停播放,3是调用视频推荐列表的插件
v:'',//默认音量,0-100之间
p:'',//视频默认0是暂停,1是播放
h:'',//播放http视频流时采用何种拖动方法,0是按关键帧,1是按关键时间点
q:'',//视频流拖动时参考函数,默认是start
m:'',//默认是否采用点击播放按钮后再加载视频,0不是,1是,设置成1时不要有前置广告
g:'',//视频直接g秒开始播放
j:'',//视频提前j秒结束
k:'10|40|80',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字
n:'跳过开头|小企鹅宝宝下水了|跳过结尾',//提示点文字,跟k配合使用,如 提示点1|提示点2
b:'0x000',//播放器的背景色,如果不设置的话将默认透明
w:'',//指定调用自己配置的文本文件,不指定将默认调用和播放器同名的txt文件
//调用播放器的所有参数列表结束
//以下为自定义的播放器参数用来在插件里引用的
my_title:'视频标题',//视频标题
my_url:'http://www.ckplayer.com/index.php',//本页面地址
my_summary:'这是一个测试页面',//视频介绍,请保持在一行文字,不要换行
my_pic:'http://www.ckplayer.com/temp/11.jpg'//分享的图片地址
//调用自定义播放器参数结束
因为刚下的 里面的一些参数是他定义的,你需要改变播放页面的一些设置可以去修改他的js代码,每一个参数都有说明,仔细阅读就好了。
注:如果想要设置页面上的位子,需要去改 style.swf里面的style.xml里面的一些格式,详情,去看官网。 比如:删除设置按钮
插件的调用
下载好插件,
①把 style.swf 改成zip的格式
②把你下载好的.swf添加到 style.zip里面,然后把后缀名改回来。
③ 打开你的ckplayer.js 把插件代码加入
④添加参数,还是在js里面
⑤初始化,清空cookie浏览
var flashvars = {
f: videoSrc,
a: '',
deft: '标清,高清,超清,', //配置文件里有,则不需要再设置
deff: '/Video/1_0.mp4?t=1|/Video/1_0.mp4?t=2|/Video/1_0.mp4?t=3', //后面注意带参数
c: 0
}
效果:
注:你可以在案例的网站里面把他的案例代码扣出来,照着文档来写,把案例里面的代码复制出来。
格式转化 -->转 FLV
官网:查看
之前也说了,PC端存FLV格式,当然需要把格式转成FLV格式的。 这个进程还可以视频截图,很对的用法执行网上搜索。
这里需要一个程序(进程),FFMPEG。
定义: 可以将一种视频格式(包括封转格式和编码格式)转换为另一种视频格式。转码器在视音频编解码处理的程序中,属于一个比较复杂的东西。因为它结合了视频的解码和编码。一个视频播放器,一般只包含解码功能;一个视频编码工具,一般只包含编码功能;而一个视频转码器,则需要先对视频进行解码,然后再对视频进行编码,因而相当于解码器和编码器的结合。
①下载 FFMPEG.exe
②转化方法,第一个参数是你需要转换视频的路径(传的值是服务器的路径),第二个参数是一个格式为 flv的视频(已存在,需要自己准备一个)。根据自己修改也可以改成绝对地址。
这个方法是活的,你只用把最最后的那段启动程序的代码保留,其余的自己写。
#region 视频格式转为Flv
/// <summary>
/// 视频格式转为Flv
/// </summary>
/// <param name="vFileName">原视频文件地址</param>
/// <param name="ExportName">生成后的Flv文件地址</param>
public bool ConvertFlv(string vFileName, string ExportName)
{
string ffmpegtool = Server.MapPath("~/Flv/ffmpeg.exe"); //你的ffmpeg.exe绝对路径 if ((!System.IO.File.Exists(ffmpegtool)) || (!System.IO.File.Exists(Server.MapPath(vFileName))))
{
return false;
}
//可以添加一个flv格式的视频做模板,每次用的时候把视频Copy到另一个文件夹去转换,这里没有这样写,可以自己修改
vFileName = Server.MapPath(vFileName);
ExportName = Server.MapPath(ExportName); //别的格式转flv格式 命令
string Command = " -i \"" + vFileName + "\" -y -ab 32 -ar 22050 -b 800000 -s 480*360 \"" + ExportName + "\""; //Flv格式 //转mp4格式 flv->mp4成功 不能用video播放,可以用播放器使用
string aa3 = $"-i {vFileName} -y -b 1024k -acodec copy -f mp4 {ExportName}"; System.Diagnostics.Process p = new System.Diagnostics.Process(); //利用Pocess启动应用程序
p.StartInfo.FileName = ffmpegtool; //地址
p.StartInfo.Arguments = Command;//命名行 p.StartInfo.UseShellExecute = false;
p.StartInfo.RedirectStandardInput = true;
p.StartInfo.RedirectStandardOutput = true;
p.StartInfo.RedirectStandardError = true;
p.StartInfo.CreateNoWindow = false;
p.Start();
p.BeginErrorReadLine();
p.WaitForExit();
p.Close();
p.Dispose();
return true;
}
#endregion
③传递参数,这是根据你的上面的方法来进行传值,注意路径
protected async void Button1_Click(object sender, EventArgs e)
{
Stopwatch sw = new Stopwatch();
await Task.Run(() =>
{
HttpPostedFile hf = Request.Files["FileUpload1"];
string path = Path.Combine(Server.MapPath("~/Upload/"), hf.FileName);
hf.SaveAs(path);
if (ConvertFlv("~/Upload/" + hf.FileName, "~/Upload2/Test.flv"))
{
Response.Write("成功:" + sw.ElapsedMilliseconds / 1000.0 + " s");
}
else
{
Response.Write("失败");
} });
}
这样就可以了。
//参数说明 FFMPEG
/*
* -i filename(input) 源文件目录
* -y 输出新文件,是否强制覆盖已有文件
* -c 指定编码器
* -fs limit_size(outinput) 设置文件大小的限制,以字节表示的。没有进一步的字节块被写入后,超过极限。输出文件的大小略大于所请求的文件大小。
* -s 视频比例 4:3 320x240/640x480/800x600 16:9 1280x720 ,默认值 'wxh',和原视频大小相同
* -vframes number(output) 将视频帧的数量设置为输出。别名:-frames:v
* -dframes number (output) 将数据帧的数量设置为输出.别名:-frames:d
* -frames[:stream_specifier] framecount (output,per-stream) 停止写入流之后帧数帧。
* -bsf[:stream_specifier] bitstream_filters (output,per-stream) 指定输出文件流格式,
例如输出h264编码的MP4文件:ffmpeg -i h264.mp4 -c:v copy -bsf:v h264_mp4toannexb -an out.h264
* -r 29.97 桢速率(可以改,确认非标准桢率会导致音画不同步,所以只能设定为15或者29.97)
*
*/
转MP4格式
找了好多文章都没有说怎么解决这个问题,就在服务器上解决吧。
上传了视频可设置审核,然后在服务器上安装一个转换视频的软件,手动进行转换。
ckplayer插件播放视频的更多相关文章
- Unity3D使用EasyMovieTexture插件播放视频
Unity3D对于视频的播放兼容个人感觉很差劲,之前写过一篇使用Unity3D自己自带的一些功能去播放视频,链接如下: http://www.cnblogs.com/xiaoyulong/p/8627 ...
- 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
- web网页中使用vlc插件播放相机rtsp流视频
可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...
- EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码
背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
- EasyNVR网页Chrome无插件播放摄像机视频功能二次开发之云台控制接口示例代码
随着多媒体技术和网络通信技术的迅速发展,视频监控技术在电力系统.电信行业.工业监控.工地.城市交通.水利系统.社区安防等领域得到越来越广泛的应用.摄像头直播视频监控通过网络直接连接,可达到的世界任何角 ...
- 播放视频插件swfobject.js与Video Html5
播放视频的方法: 方法一. 使用HTML5播放 <video src="./files/Clip_480_5sec_6mbps_h264.mp4" width="1 ...
- ckplayer网页播放器简易教程
前言 ckplayer是一款在网页上播放视频的免费视频插件,该插件兼容性强.使用简单.api齐全.另外,任何个人网站或商业网站在不修改右键版权的基础上都可以免费使用. 下面将对ckplayer的整个使 ...
- (转载)开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !
文章链接:http://justcoding.iteye.com/blog/2110275 CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的 ...
- ckplayer 插件在线视频播放
1. CKplayer 它是一款用于网页上播放视频的插件,支持的格式有:http 协议上的 flv, f4v, mp4格式,同时支持 rtmp 视频流格式播放.使用非常简单. <html> ...
随机推荐
- Android官方架构组件介绍之ViewModel(三)
ViewModel 像Activity,Fragment这类应用组件都有自己的生命周期并且是被Android的Framework所管理的.Framework可能会根据用户的一些操作和设备的状态对Act ...
- maya2017无法安装卸载激活失败
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- Neutron命令测试2
/etc/network/interfaces auto loiface lo inet loopback auto eth0iface eth0 inet manualup ifconfig $IF ...
- jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头
beforeSend方法的用户主要有下面几个: 第一:用于在发送ajax请求之前设置请求头 即作为前端,如果我们希望在发送数据之前设置请求头,就可以像下面这么做: beforeSend: functi ...
- 现有分布式技术(socket、.net remoting、asp.net webservice、WSE、ES)和wcf的比较及优势
1:socket VS remoting 使用socket无疑是效率最高的.但是,在复杂的接口环境下,socket的开发效率也是最低的.故在兼顾开发效率的情况下,可以使用remoting来代替sock ...
- MemoryCache缓存 ---缓存时效
MemoryCache缓存 ---缓存时效测试 var cachePool = new MyCachePool(); //Thread.Sleep(1000); var value = cachePo ...
- $.ajax、$.post
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data ...
- 一道Java集合框架题
问题:某班30个学生的学号为20070301-20070330,全部选修了Java程序设计课程,给出所有同学的成绩(可用随机数产生,范围60-100),请编写程序将本班各位同学的成绩按照从低到高排序打 ...
- Eclipse reference
http://download.csdn.net/download/ling_min/4318719 http://www.qualityeclipse.com/eclipse-gef http:// ...
- Python开发环境Wing IDE如何使用GTK和PyGObject
Wing IDE是一个集成开发环境,可用于编辑.测试和调试使用PyGObject为GTK编写的Python代码.Wing IDE提供自动完成.调用提示.一个强大的调试器,以及许多其他功能,可帮助用户编 ...