goeasy+jquery+ckplayer实现动态实时视频弹幕
就在前几天,无聊中看了会斗鱼直播,看到他们的弹幕。就忽然有了个想法,我能不能做到呢? 于是趁着周六周日时间多,就做了下。
效果如图所示:
也可以进入 http://123.207.172.86/DanMu_danmu.html
如果对goeasy和ckplayer不理解的可以进入相应的官网查看教程,挺简单的。
思路如下
- 由于是实时弹幕,所以需要时时刻刻读取数据库内容,可是大量的ajax请求会影响服务器性能。于是就使用了goeasy第三方实时消息推送框架。
- 弹幕的动态化可以使用jquery的animate动画来实现.弹幕的位置和颜色,随便一个随机数就搞定啦
- 至于把弹幕消息发送到数据库就更简单了 ,随便一个请求就可以了
- 最重要的就是视频插件了,这这里我使用的是ckplayer网页视频播放器,觉得很简单实用。
- 还有一点就是显示数据库中的弹幕,由于goeasy只能接收实时弹幕,所以需要通过ckplayer来获得当前视频的播放时间。具体实现是,在视频播放之前使用Ajax请求读取数据中的所有弹幕并保存在一个集合里面(按弹幕时间排序),在视频播放时,轮询集合,当前视频播放的时间和弹幕时间对比即可。
本机环境
- windows7 64位
- jdk1.7
- myeclipse10
- ie浏览器+chrome浏览器
界面设计
记得以前好像看过郭霖大神的android弹幕实例,具体忘记了。就记得在视频上方套一层弹幕的区域。于是设计就出来了
<!-- 文字区域--><div class="screen"><!-- 播放器 --><div id="a1" class="player"></div><!-- 这里可以写弹幕输入框--></div>
- 1
- 2
- 3
- 4
- 5
- 6
然后就是通过一系列的css操作来布局界面 最终如下:
- 其中弹幕的区域大小和视频的区域大小一致(请忽略现在的视频插件)
- 下方是弹幕输入区域
各个模块的设计
对于这个是浪费我时间最多的地方,ckplayer是找了好久才找到的一个网络视频插件。
goeasy是实现实时弹幕的第三方实时消息推送框架。
ckplayer
由于是第三方视频插件,具体就不说明了。
需要你知道的就是播放的视频路径,宽度和高度,为播放器绑定事件,我会在下面标注
具体设置可以查看ckplayer.js和ckplayer.xml
var flashvars={//视频路径f:'http://123.207.172.86/ckplayer/video/jannina weigel.mp4',c:0,p:1,//为播放器绑定事件loaded:'loadedHandler'};var video=//视频路径['http://123.207.172.86/ckplayer/video/jannina weigel.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];//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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在这里我也实现了视频的连播功能
/*视频加载事件 至于为什么使用if判断 是为了兼容HTML5endedHandler:为视频的连播功能,当视频结束时会调用这个事件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->http://123.207.172.86/ckplayer/video/dusk.mp4}{html5->http://123.207.172.86/ckplayer/video/dusk.mp4->video/mp4}')}else{CKobject.getObjectById('ckplayer_a1').newAddress('{p->1}{f->http://123.207.172.86/ckplayer/video/jannina weigel.mp4}{html5->http://123.207.172.86/ckplayer/video/jannina weigel.mp4->video/mp4}')}videoAddress=!videoAddress;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
由于发送弹幕需要记录当前视频的播放时间,所以还需要记录当前视频的播放时间。
function timeHandler(t){//time即为当前视频的播放时间time=t;
}
- 1
- 2
- 3
- 4
goeasy实时消息推送功能
goeasy接收弹幕消息
当有一个发送消息时,会将这个内容推送给订阅相同频道的其它用户
在js中:
//new一个实体 其中appkey只能用来接收消息var goeasy = new GoEasy({appkey: 'BS-6cab73eced1440c582eaf081488cf917'});//从goeasy的DanMu频道接收内容goeasy.subscribe({channel: 'DanMu',onMessage: function (result) {//将其它客户端发送的消息显示到屏幕addTxt2Screen(result.content);}});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
goeasy发布弹幕消息
在某个用户的弹幕消息提交到数据库之前,将该消息发布给其它订阅此频道的用户
//your key 填写你注册的goeasy的appkey
GoEasy go=new GoEasy("your key");
public void add(){//使用goeasy第三方推送服务 向相同频道的其它用户推送消息go.publish("DanMu", txt);//将弹幕内容和时间保存到数据库dmDao.add(new DanMu(txt,time));}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
弹幕的动画效果
当有用户发送弹幕时,在弹幕文字区域添加一个font标签即可。
并且使用jquery的animate
//把弹幕文字发射到屏幕中function addTxt2Screen(txt){var name="txt"+i;i++;$('.screen').prepend( '<font class='+name+'>'+txt+'</font>');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();});}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
两个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<allDanmu.length;i++){var temp=allDanmu[i].split(",");var x=new danmu(temp[0],temp[1]);danmuList[i]=x; }danmuLen=danmuList.length;}});}//向弹幕文字区域发送弹幕while(index<danmuLen){if(Math.abs(danmuList[index].time-time)<0.3||danmuList[index].time<t){addTxt2Screen(danmuList[index].msg);index++;continue;}break;}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
第二个是在用户发送了弹幕消息时将该弹幕消息写入到数据库
因为在写入到数据库之前会将该弹幕消息广播给用户,也包括自己,所以在这里不用显示。
//发送弹幕事件$('.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){}});});
goeasy+jquery+ckplayer实现动态实时视频弹幕相关推荐
- websocket+netty实时视频弹幕交互功能(Java版)
欢迎关注方志朋的博客,回复"666"获面试宝典 2021年了,还有不支持弹幕的视频网站吗,现在各种弹幕玩法层出不穷,抽奖,ppt都上弹幕玩法了,不整个弹幕都说不过去了,今天笔者就抽 ...
- jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
- JQuery插件:动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
- php把数字倒着展示,jQuery+PHP实现动态数字展示特效
HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 代码如下: 当前在线: jQuery 首先我 ...
- php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
- 使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
- html5中奖名单特效,jQuery基于json动态随机获取中奖名单抽奖代码
jQuery基于json动态随机获取中奖名单抽奖代码,可以随机批量抽出多个中奖用户名单. 查看演示 下载资源: 22 次 下载资源 下载积分: 20 积分 js代码 //从一个给定的数组arr中,随机 ...
- Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击"添加输入框"按钮时,就会自动添加一行 下 ...
- jQuery选择器之动态列表显示Demo
显示效果: 之后全部展开: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
最新文章
- 再度剖析AD账户新旧密码同时可用的问题
- tableau实战系列(三十五)-教你画个不一样的圆角条形图
- iis 跨域_织梦会员登录二级域名不能跨域
- sasl java_javaSASL_SSL帐号密码方式访问kafka
- JavaSE 学习参考:数组遍历
- 开发利器之IntelliJ IDEA学习笔记
- 4 场直播,哈工大、亚马逊等大咖为你带来机器学习与知识图谱的内容盛宴
- c语言getchar在哪个头文件_c语言入门(一)
- 适合python组态软件_组态软件心得体会
- java劳务派遣信息管理系统servlet员工社保工资信息jsp源码mysql
- rm -rf 误删除数据如何进行恢复
- PDF提取页面方法,如何从PDF文件中提取页面
- 超详细超快的免费图床设置教程
- 用免费新浪云sea搭建个人云服务器
- php怎么自动识别车牌号,如何在Windows中使用Open ALPR(自动车牌识别)从图像中识别车辆牌照...
- useImperativeHandle使用实例
- Oracle VM VirtualBox 共享文件夹
- 解决使用打印机打印网页时字体颜色变淡的问题
- 12. STM32——硬件IIC驱动OLED屏幕显示
- console不止console.log
热门文章
- 二进制包20分钟快速安装部署 Kubernetes v1.14.0 集群
- 共享打印机服务器系统64位,win7系统64位和winXP 32位共享网络打印机的操作方法...
- Amesim2016与Matlab2017b联合仿真环境搭建
- MSSQL 2012 密钥
- 人工智能、机器学习、深度学习、神经网络的区别
- Tomcat6 无法登陆Tomcat Manager
- x86_64 x86 amd64 i386 i686 aarch64等词语含义
- jtag接口_一份很好的JTAG完全解读资料
- Feem(局域网文件传输工具)v4.3.0官方版
- Springboot URL Rewrite