谏知中文网

悟已往之不谏,知来者之可追

ckplayer、jwplayer、cuplayer播放器使用对比

发表于 2016-06-28 9266 次浏览

最近项目中有关于网页视频播放,将几种播放器的使用整理如下:

ckplayer和cuplayer都属国产播放器,能百度到详细的开发文档,学习起来非常方便

jwplayer属国外产品,相关文档较少,如果不使用翻墙工具,访问官网非常慢(https://account.jwplayer.com/sign-in?platform=1),注册账号获取key值(代码中会使用到)

对于flv/mp4视频边加载边播放、自由拖拽功能的支持:

1.ckplayer在apache、nginx、iis等主流web服务器下要单独配置、加装相关module组件等,另外需借助第三方软件yamdi给flv文件添加关键帧,借助ffmpeg给mp4文件添加关键帧、添加元数据,用qt-faststart将元数据转到视频

第一帧等(参考:http://www.ckplayer.com/manual/12/66.htm),代码中也要配置相关参数

var flashvars={
        f:'http://www.jyncode.com/video.mp4',
        c:0,
        p:1,
        h:3, //按后缀名自动判断按关键帧(mp4)还是时间点(flv)进行拖动
        q:'start',
        my_url:encodeURIComponent(window.location.href),
        my_title:encodeURIComponent(document.title)
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,
   allowScriptAccess:'always',wmode:'transparent'};
 var video = ['http://www.jyncode.com/video.mp4->video/mp4'];
 CKobject.embed('/ckplayer/ckplayer.swf','a1','ckplayer_a1',
'864','486',false,flashvars,video,params);

支持分享、开关灯功能有瑕疵

2.cuplayer要求服务器支持RTMP协议,若服务器只支持HTTP协议,则只能在缓存后的区域内拖动,配置流媒体服务器请参考
http://www.cuplayer.com/player/PlayerCode/Wowza/2016/0117/2262.html

var so = new SWFObject("player.swf","myCuPlayer","864","486","9","#000000");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addParam("quality","high");
so.addParam("salign","lt");
//播放器设置文件-----------------------------
so.addVariable("JcScpFile","CuSunV3set.xml"); //配置文件
//视频文件及略缩图--------------------------
so.addVariable("JcScpServer","rtmp://b.cuplayer.net/vod"); //流媒体服务器
so.addVariable("JcScpVideoPath","mp4:test.mp4"); //视频文件地址
so.addVariable("ShowJcScpAMoveText", "no"); //滚动文字广告
so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
so.addVariable("JcScpImg","images/startpic.jpg"); //视频缩略图
so.addVariable("ShowJcScpACorner", "no"); //角标广告
//-----------------------------------------
so.addVariable("JcScpSharetitle","视频title"); //视频标题
so.write("CuPlayer");

支持分享、开关灯功能,无法去除右下角提供商信息(修改swf源文件)

3.jwplayer只要求服务器能支持MP4的mime类型即可,最为简单便捷,不过存在跨域问题(crossdomain.xml文件配置)

<script src='jwplayer.js'></script>
<div id="myElement"></div>
<script type="text/javascript">
  jwplayer.key="KjTelNivlYW874jhhghS8mOXlq6Wzn6B68lhpDEUWZkq6w==";
</script>
<script type="text/javascript">

jwplayer("myElement").setup({
  file:"http://www.jyncode.com/video.mp4",
  flashplayer:"jwplayer.flash.swf",
  width:864,
  height:486,
  startparam: "start",
  autostart: true,
  sharing:{ //分享插件
        "heading": "\u89c6\u9891\u64ad\u653e\u5206\u4eab",
        "link": "http://content.jwplatform.com/previews/MEDIAID-pK5adIVu",
        "sites": ["facebook", "twitter", "email"]
  }
 });
 
 jwplayer("myElement").on('ready', function(event){
    sharingPlugin = jwplayer().getPlugin('sharing');
    sharingPlugin.on('click');
 });
</script>

不支持开关灯、默认分享到Facebook、Twitter等国外社交平台(修改分享插件)、右击有提供商信息(修改swf源文件)