BikBok - 纯粹的短视频浏览

hard2reg · 4 小时前 · 103 次点击

新手刚学习前端,勿喷。

BikBok - Infinite Swipe Short Video

项目简介

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

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

Preview

Preview 若无法显示手动打开,35M 的预览图。 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

举报· 103 次点击
登录 注册 站外分享
快来抢沙发
0 条回复  
返回顶部