最近项目中有关于网页视频播放,将几种播放器的使用整理如下:
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源文件)