前端react项目做一个弹幕视频播放网站（高仿B站）
Posted webchang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端react项目做一个弹幕视频播放网站（高仿B站）相关的知识，希望对你有一定的参考价值。
文章目录
项目介绍
我们做了一个模仿“B站”做了一个弹幕视频播放网站。
网站链接：http://82.157.168.147/
开发时间：2021.11.22 - 2021.12.22
后端以及APP介绍：https://blog.csdn.net/weixin_44598449/article/details/122145005
前端技术介绍：https://www.yuque.com/changyanwei-wlmrd/rbxc2v/qeqt9q
本项目完全模仿B站的UI设计和功能，如果你是新用户，则起始拥有的数据量较少，可以先多关注几个up主，三连、转发、追番、评论、发动态等操作一波。
下面是功能展示：
视频分区
- 主页
- 动画
- 番剧
- 国创
- 音乐
- 知识
- 生活
- 娱乐
- 鬼畜
- 游戏
- 科技
视频
普通视频
单个视频/视频集合
http://82.157.168.147/video/298
番剧
http://82.157.168.147:9003/play/88
番剧点评
番剧点评详情
http://82.157.168.147:9003/media/88
三连
- 点赞
- 投币
- 收藏
转发
评论
关注up
弹幕
可以发送不同颜色和位置的弹幕，颜色选择器是模仿B站自己写的
个人空间
主页
如何进入？访问链接：http://82.157.168.147/space/2 （最后的数字就是用户id，我的用户id是2）
或者，鼠标放在在顶部导航栏的个人头像上，之后会有一个弹窗，鼠标点击个人头像就能进入个人空间
我的投稿视频
三种排序方式
- 最新发布
- 最多播放
- 最多收藏
收藏夹
点击【更多】按钮后会跳转到收藏夹的详细页面
订阅的番剧
这里只展示4条自己订阅过的番剧信息，点击【更多】按钮后会跳转到订阅番剧的详细页面，也可以对番剧进行标记
最近投币的视频
展示最近投币的前8条视频，点击对应的视频可跳转到视频播放页面。
投币包括对普通视频和番剧的投币，如果是番剧，则视频卡片下方会多显示一行番剧的更新信息（更新到第xxx话）；如果是普通视频，则只显示视频标题（最多两行）。
下边的【最近点赞的视频】同理。
最近点赞的视频
公告
- 公告是一个textarea，输入信息后鼠标移出，触发textarea的onBlur事件，会发送网络请求来设置公告。
- 做了简单的权限控制，只有进入自己的空间才能编辑公告，进入别人的空间则没有权限。
设置头图
只有进入自己的空间才能设置头图，进入别人的空间则根本不会显示【设置头图】的按钮。
关注
进入其他人的空间时会展示【关注】按钮，当然在自己的空间是没有这个按钮的。另外一些文字显示也会有差别。
可以对关注的UP设置分组。
个人动态
http://82.157.168.147/space/2/dynamic
动态分为6种
- 投稿视频动态（目前还没有做投稿的功能，只有个别测试用户有投稿视频）
- 图文动态
- 番剧更新动态（个别测试用户可以发表番剧）
- 转发动态
- 转发视频
- 转发图文
- 转发番剧
置顶动态
用户可以对自己的某一条动态进行置顶，当然如果用户进入其他人的空间是没有操作权限的，不再赘述。
删除动态
只能删除转发动态（包括转发视频、转发图文、转发番剧）和图文动态，不能删除番剧动态和投稿视频动态。
点赞、评论、转发动态
投稿视频
收藏
用户对视频的收藏信息，包括收藏夹。
- 对收藏夹进行编辑，如更改名称，自定义封面等
- 筛选：可按照分区和最近收藏/播放/投稿两个维度进行筛选
- 搜索：输入关键词搜索收藏视频
对收藏的视频进行操作（取消收藏或者移动收藏夹）
搜索和筛选
订阅
展示用户订阅过的番剧和国创信息。可以在此对番剧进行筛选和状态的标记（想看、在看、已看、取消追番）
搜索投稿视频
可以按照关键词对当前空间用户所投稿的视频进行搜索，搜索结果会按照分区的方式列出，方便查看。
动态
http://82.157.168.147/dynamic
展示了自己所关注的UP主的动态和追番的番剧动态，包括自己发的动态
发表动态
个人中心
http://82.157.168.147/account/home
首页
我的信息
可以在这里修改昵称、签名、性别、出生日期
我的头像
更换头像和挂件
我的硬币
初始硬币值为100，该页面展示了用户增长或者消耗硬币的记录
- 每日登录、观看视频、发表动态会增长硬币
- 投币，修改昵称会消耗硬币
常见问题
特别提示：页面中看到的数据都是动态的，不是写死的！！！
Q：几个人做的？
A：前端一人，后端一人。前端使用react，只做了网页，没有做移动端适配。后端是Java，APP也是Java写的。由于网页端更加完善，所以可以以网页端为主。
Q：为什么需要登录？
A：此项目默认需要登录才能使用，另外注册时需要手机验证码，所以也需要提供真实的手机号。
Q：可以修改昵称和头像吗？
A：修改个人信息都在个人中心里边， 这是个人中心 http://82.157.168.147/account/home，如果登录过了会直接进去
Q：视频的标题封面和视频内容不一样？
A：我们的视频数据有限，为了“制造”出大量的可以播放的视频，于是将视频标题和数据随机混合生成了很多份数据，所以标题和视频内容会不一样
Q：为什么我突然下线了？
A：本项目在21年12月底上线，难免会有一些bug，完善代码后会重启服务器，此时默认会将正在浏览网站的用户强制退出进行重新登录。
Q：为什么我不能上传视频？
A：由于时间限制，我们只实现了部分功能，目前只能发表图文动态和转发动态。同时预计将在2022年4月份继续开发，届时将新增以下功能：
- 历史记录
- 创作中心/投稿
- 直播
前端学习交流QQ群 862748629，群内学习讨论的氛围很好，大佬云集。点我加入
以上是关于前端react项目做一个弹幕视频播放网站（高仿B站）的主要内容，如果未能解决你的问题，请参考以下文章