goeasy+jquery+ckplayer实现动态实时视频弹幕
来源:互联网 发布:xp找不到网络路径 编辑:程序博客网 时间:2024/06/05 12:04
就在前几天,无聊中看了会斗鱼直播,看到他们的弹幕。就忽然有了个想法,我能不能做到呢? 于是趁着周六周日时间多,就做了下。
效果如图所示:
也可以进入 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弹幕实例,具体忘记了。就记得在视频上方套一层弹幕的区域。于是设计就出来了
- 1
- 2
- 3
- 4
- 5
- 6
然后就是通过一系列的css操作来布局界面 最终如下:
- 其中弹幕的区域大小和视频的区域大小一致(请忽略现在的视频插件)
- 下方是弹幕输入区域
各个模块的设计
对于这个是浪费我时间最多的地方,ckplayer是找了好久才找到的一个网络视频插件。
goeasy是实现实时弹幕的第三方实时消息推送框架。
ckplayer
由于是第三方视频插件,具体就不说明了。
需要你知道的就是播放的视频路径,宽度和高度,为播放器绑定事件,我会在下面标注
具体设置可以查看ckplayer.js和ckplayer.xml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在这里我也实现了视频的连播功能
- 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
由于发送弹幕需要记录当前视频的播放时间,所以还需要记录当前视频的播放时间。
- 1
- 2
- 3
- 4
goeasy实时消息推送功能
goeasy接收弹幕消息
当有一个发送消息时,会将这个内容推送给订阅相同频道的其它用户
在js中:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
goeasy发布弹幕消息
在某个用户的弹幕消息提交到数据库之前,将该消息发布给其它订阅此频道的用户
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
弹幕的动画效果
当有用户发送弹幕时,在弹幕文字区域添加一个font标签即可。
并且使用jquery的animate
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
两个ajax请求
第一个是在视频播放之前,加载数据库中的所有内容
这个仅仅加载一次。并将所有的弹幕消息保存到danmuList(按时间从小到大排序)里面。
并且在timeHandler时间里每次都判断当前位置index的弹幕时间和当前视频的播放时间是否一致,如果大于就等待下次~while循环轮询
- 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
第二个是在用户发送了弹幕消息时将该弹幕消息写入到数据库
因为在写入到数据库之前会将该弹幕消息广播给用户,也包括自己,所以在这里不用显示。
- goeasy+jquery+ckplayer实现动态实时视频弹幕
- goeasy+jquery+ckplayer实现动态实时视频弹幕
- goeasy+jquery+ckplayer实现动态实时视频弹幕
- GoEasy + jQuery animate实现弹幕功能
- GoEasy实现弹幕效果
- 实时推送--GoEasy实现
- 海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频
- 海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频
- 海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频
- java实时推送消息goeasy实现
- 用GoEasy推送实现Java实时推送
- 使用goEasy实现web消息实时推送
- 使用GoEasy实现web实时推送
- Jquery实现弹幕效果
- jquery实现弹幕效果
- jQuery实现弹幕效果
- jQuery实现弹幕效果
- 基于GoEasy实现Java web实时数据推送
- CADWorx2018 v18.0.0官方中文版下载附安装教程
- [Java] 请求转发, 请求包含与请求重定向
- BootStrap入门响应式栅栏
- 图像处理之图像分割之边缘分割之边缘松弛
- java -- Map映射接口
- goeasy+jquery+ckplayer实现动态实时视频弹幕
- servlet生命周期
- qml开发笔记
- servlet的config
- StyleWriter英文润色软件使用说明(含破解安装包)
- HDU2087 剪花布条
- IDEA——创建Maven Web工程
- 使用注解操作redis中的缓存
- 一起Talk Android吧(第五十五回:Android中的Fragment显示与隐藏二)