BikBok - 纯粹的短视频浏览

[hard2reg]

新手刚学习前端，勿喷。

BikBok - Infinite Swipe Short Video

项目简介

BikBok 是一个模仿抖音（ TikTok ）无限滑动浏览视频功能的Demo。

没有第三方组件，没有点赞，没有评论，没有视频描述，纯粹的浏览。

Preview

技术栈

• 前端：HTML5, CSS, JavaScript
• 后端：Python(FastAPI)

功能描述

1. 视频展示

用户可以通过滑动或者按键控制来浏览视频。每个视频均能自动播放并且支持静音与取消静音。

2. 视频切换

通过上/下箭头或者鼠标滚轮，用户可以切换到下一个或上一个视频。

3. 静音与播放控制

用户可以通过按下 'M' 键控制视频的静音与取消静音，或者通过空格键来控制视频的播放与暂停。

4. 触摸控制（移动设备）

在移动设备上，用户可以通过上下滑动手势来切换视频。默认情况下，移动设备上的视频会自动取消静音。

5. 视频加载与刷新

当视频播放结束或用户滑动到列表末尾时，应用会自动拉取新的视频，并显示在视频列表中。

6. 用户会话

每个用户都会生成一个唯一的会话 ID ，服务端通过此 ID 追踪用户已观看的视频并根据未观看的视频列表提供推荐（实际上是保证随机播放）。

部署

1. 将 MP4 视频文件 video_dir 文件夹内。

• Tips：如果元数据存储在视频文件开头，播放前的加载时间会更快。
• 优化：使用 FFmpeg 将元数据移动到文件开头：

  ffmpeg -i input.mp4 -movflags +faststart output.mp4
  

1. 运行bikbok-server.py

   python bibok-server.py -d video_dir -m local -p 23333
   

2. 在浏览器中打开网址即可体验。

Repo： https://github.com/hadwinfu/BikBok

[hard2reg]

勘误：移动设备上的视频也是默认静音。

[mayerer]

难的是内容和推荐算法