新手刚学习前端,勿喷。
BikBok - Infinite Swipe Short Video
项目简介
BikBok 是一个模仿抖音( TikTok )无限滑动浏览视频功能的Demo。
没有第三方组件,没有点赞,没有评论,没有视频描述,纯粹的浏览。
Preview
若无法显示手动打开,35M 的预览图。
Preview
技术栈
- 前端:HTML5, CSS, JavaScript
- 后端:Python(FastAPI)
功能描述
1. 视频展示
用户可以通过滑动或者按键控制来浏览视频。每个视频均能自动播放并且支持静音与取消静音。
2. 视频切换
通过上/下箭头或者鼠标滚轮,用户可以切换到下一个或上一个视频。
3. 静音与播放控制
用户可以通过按下 'M' 键控制视频的静音与取消静音,或者通过空格键来控制视频的播放与暂停。
4. 触摸控制(移动设备)
在移动设备上,用户可以通过上下滑动手势来切换视频。默认情况下,移动设备上的视频会自动取消静音。
5. 视频加载与刷新
当视频播放结束或用户滑动到列表末尾时,应用会自动拉取新的视频,并显示在视频列表中。
6. 用户会话
每个用户都会生成一个唯一的会话 ID ,服务端通过此 ID 追踪用户已观看的视频并根据未观看的视频列表提供推荐(实际上是保证随机播放)。
部署
- 将 MP4 视频文件 video_dir 文件夹内。
-
运行bikbok-server.py
python bibok-server.py -d video_dir -m local -p 23333
-
在浏览器中打开网址即可体验。
Repo: https://github.com/hadwinfu/BikBok
|