没什么好说的,自己下载了看就行
基于websocket技术的弹幕视频网站安利
开发周期只有10天,不要奢求有什么过多的内容
(咱就是个臭写前端的,居然还要写这种勾勾文档
登录界面加入节流防止有贵物乱登录
在进入视频界面的时候会请求服务器获取全部弹幕
其余内容看下面的前端文档吧
前端报告分为以下几个部分:
前端流程图
前端界面介绍
弹幕界面实现逻辑
以下为正文:
流程图因为太过重要就不给各位看了捏
前端一共分为三个界面:登录界面,多视频展示界面(主页),单视频展示界面
登录界面:
登录界面负责基础登录,登录的背景图直接加在了body主体上,拥有两个按钮,登录和注册,其中,注册按钮一点用都没有,点击之后会弹出无意义的文字(其实就是我不想做了),登录界面会通过基础的jquery ajax请求发送后端需要的登录名和密码
登录这里一旦登录之后会将用户整个内容存放在session中,后续使用thymeleaf进行访问
登录为了防止用户疯狂点击登录按钮,使用了节流,2s之内只能处理一次点击,一旦多次点击会弹出无意义的对话框
展示基础的多视频,界面使用墨刀设计,设计图会在上传项目时一并上传。
左上角的图片用以返回主页(就这个界面),如果检测到用户没有登录,会在右上角显示登录按钮,点击跳转登录界面
首页中间会显示bootstrap的轮播图,图中有大量屑梗,下面还有一个会弹出无意义消息的无意义按钮
视频展示区域负责展示视频的缩略图,设定只有8个,点击之后会以?mid=xx的格式把mid作为追加信息发送给特定视频界面
最底下的区域更是重量级草莓蛋糕。。
单视频界面顶部内容和多视频相同
单视频界面会展示特定视频,并提供发送弹幕功能
界面中视频直接使用video标签加入,这个video默认是空的,使用js文件填入请求的视频
弹幕其实是一个空的组件,这个组件作为一个父窗体,当需要发送弹幕的时候,创建他的子窗体,这个窗体指定一堆格式和内容,将他的位置移动到覆盖视频的位置,然后从右到左进行滚动
界面初始化的时候,会初始化2个内容,1基础的界面内容,在初始化的时候,将基础的高度和其余参数设置完毕,2初始化websocket,进行链接并且把websocket的发送,接受等方法初始化
根据后端需求,将chat发送过去,请求所有的弹幕
建立随机数,开始随机数计时,在这行代码附近进行视频填装,把上面的视频文件加入
播放视频,在播放的时候按照后端的逻辑处理弹幕收发问题
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。