goeasy+jquery+ckplayer实现动态实时视频弹幕

goeasy+jquery+ckplayer实现动态实时视频弹幕

文章目录

##更新##

2018.5.19

感慨万千，去年的现在我还在努力的写这个弹幕，当时仅仅是为了好玩、学习。现在在某公司实习，毕业就能转正。看到很多人向我要这个系统的源码，庆幸的是找到了之前写的代码，我把源码上传到github上了，想学习的可以看下。地址：于是趁着周六周日时间多，就做了下。

效果如图所示：

也可以进入 ，随便一个请求就可以了最重要的就是视频插件了，这这里我使用的是ckplayer网页视频播放器，觉得很简单实用。还有一点就是显示数据库中的弹幕，由于goeasy只能接收实时弹幕，所以需要通过ckplayer来获得当前视频的播放时间。具体实现是，在视频播放之前使用Ajax请求读取数据中的所有弹幕并保存在一个集合里面（按弹幕时间排序），在视频播放时，轮询集合，当前视频播放的时间和弹幕时间对比即可。

##本机环境##

windows7 64位jdk1.7myeclipse10ie浏览器+chrome浏览器

##界面设计## 记得以前好像看过郭霖大神的android弹幕实例，具体忘记了。就记得在视频上方套一层弹幕的区域。于是设计就出来了

然后就是通过一系列的css操作来布局界面 最终如下：

其中弹幕的区域大小和视频的区域大小一致（请忽略现在的视频插件）下方是弹幕输入区域

##各个模块的设计##

对于这个是浪费我时间最多的地方，ckplayer是找了好久才找到的一个网络视频插件。 goeasy是实现实时弹幕的第三方实时消息推送框架。 ###ckplayer### 由于是第三方视频插件，具体就不说明了。 需要你知道的就是播放的视频路径，宽度和高度，为播放器绑定事件，我会在下面标注 具体设置可以查看ckplayer.js和ckplayer.xml

var flashvars={ //视频路径 f:'weigel.mp4', c:0, p:1, //为播放器绑定事件 loaded:'loadedHandler' }; var video= //视频路径 ['weigel.mp4->video/mp4',' //width和height为播放器的宽度和高度 CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1',width,height-100,false,flashvars,video) //HTML5用到 var support=['iPad','iPhone','ios','android+false','msie10+false']; CKobject.embedHTML5('a1','ckplayer_a1',width,height-100,video,flashvars,support);

在这里我也实现了视频的连播功能

/* 视频加载事件 至于为什么使用if判断 是为了兼容HTML5 endedHandler：为视频的连播功能，当视频结束时会调用这个事件 timeHandler：监听视频当前的播放时间长度，单位秒。 */ function loadedHandler(){ if(CKobject.getObjectById('ckplayer_a1').getType()){ CKobject.getObjectById('ckplayer_a1').addListener('ended',endedHandler); CKobject.getObjectById('ckplayer_a1').addListener('time',timeHandler); } else{ CKobject.getObjectById('ckplayer_a1').addListener('ended','endedHandler'); CKobject.getObjectById('ckplayer_a1').addListener('time','timeHandler'); } } //视频连播功能 更换视频的播放地址 function endedHandler(){ if(videoAddress) { CKobject.getObjectById('ckplayer_a1').newAddress('{p->1}{f-> } else { CKobject.getObjectById('ckplayer_a1').newAddress('{p->1}{f->weigel.mp4}{html5->weigel.mp4->video/mp4}') } videoAddress=!videoAddress; }

由于发送弹幕需要记录当前视频的播放时间，所以还需要记录当前视频的播放时间。

function timeHandler(t){ //time即为当前视频的播放时间 time=t;}

###goeasy实时消息推送功能### ####goeasy接收弹幕消息#### 当有一个发送消息时，会将这个内容推送给订阅相同频道的其它用户 在js中：

//new一个实体 其中appkey只能用来接收消息 var goeasy = new GoEasy({ appkey: 'BS-6cab73eced1440c582eaf081488cf917' }); //从goeasy的DanMu频道接收内容 goeasy.subscribe({ channel: 'DanMu', onMessage: function (result) { //将其它客户端发送的消息显示到屏幕 addTxt2Screen(result.content); } });

####goeasy发布弹幕消息#### 在某个用户的弹幕消息提交到数据库之前，将该消息发布给其它订阅此频道的用户

//your key 填写你注册的goeasy的appkeyGoEasy go=new GoEasy("your key");public void add(){ //使用goeasy第三方推送服务 向相同频道的其它用户推送消息 go.publish("DanMu", txt); //将弹幕内容和时间保存到数据库 dmDao.add(new DanMu(txt,time)); }

###弹幕的动画效果### 当有用户发送弹幕时，在弹幕文字区域添加一个font标签即可。 并且使用jquery的animate

//把弹幕文字发射到屏幕中 function addTxt2Screen(txt){ var name="txt"+i; i++; $('.screen').prepend( ''+txt+''); name=".screen ."+name; var x = $(name).width(); $(name).css({left:width-x,top:getRandomTop(),color:getRandomColor()}); //jq的animate动画 $(name).animate({ left : -width + x }, 10000, function() { //移除该文字 $(this).remove(); }); }

##两个ajax请求## ###第一个是在视频播放之前，加载数据库中的所有内容### 这个仅仅加载一次。并将所有的弹幕消息保存到danmuList（按时间从小到大排序）里面。 并且在timeHandler时间里每次都判断当前位置index的弹幕时间和当前视频的播放时间是否一致，如果大于就等待下次~while循环轮询

function timeHandler(t){ time=t; if(isFirst){ isFirst=false; //ajax请求获取数据库中所有弹幕 $.ajax({ url:"DanMu/DanMu_query.action", type:"get", success:function(data){ allDanmu=data.split(";"); for(var i=0;i

###第二个是在用户发送了弹幕消息时将该弹幕消息写入到数据库### 因为在写入到数据库之前会将该弹幕消息广播给用户，也包括自己，所以在这里不用显示。

//发送弹幕事件 $('.textSubmit').click(function() { var txt = $('.inputText').val(); $('.inputText').val(""); /* * ajax异步将数据写入数据库 * 在DanMu_add.action动作类中将弹幕广播发送给其它用户 * */ $.ajax({ url:"DanMu/DanMu_add.action", type:"get", data:{"txt":txt,"time":time}, success:function(data){ } }); });

##结语##

其实我想说 为啥我觉得做着像前端了。。。 520 521 就弄这个女朋友了~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。