高仿抖音 短视频前端源码（竖屏视频流 + 点赞互动）

源码简介

这是一套高仿抖音风格的短视频前端源码，纯原生 HTML/CSS/JS 实现，配两个极简 PHP 脚本处理视频列表与点赞数。核心是一个竖屏视频信息流：自动播放、上下滑动切换、双击点赞、赞赏弹窗和底部导航，交互贴近抖音 App。适合做短视频模板演示或学习移动端视频交互。

适用场景

• 短视频模板演示或 H5 互动页面

• 前端学习触摸滑动、视频自动播放与点赞动画

• 二次开发成自有短视频 / 作品展示站点

技术栈与运行环境

• 前端：原生 HTML / CSS / JavaScript（无框架）

• 后端：PHP（api.php 扫描视频目录、like.php 维护点赞数）

• 数据库：无（点赞数存 like.json 文件）

• 运行环境：支持 PHP 的任意 Web 服务器（PHP 5+ 即可）

• 其他依赖：无；视频文件需自行放入 video/ 目录

功能亮点

• 竖屏视频信息流：autoplay / muted / loop + 滑动切换（index.html:26-29、js/video.js:101-129）

• 自动播放与静音开关：controls.js 声音控制（controls.js:20-25）

• 双击点赞与爱心动画：video.js 双击落点生成 heart-effect（video.js:66-79）

• 点赞计数：POST like.php 对 like.json +1，前端实时回显（like.php:1-21）

• 赞赏弹窗：展示二维码，controls.js 调用（controls.js:49-62）

• 底部 tabbar 导航：首页 / 朋友 / 发布 / 消息 / 我，含红点样式（index.html:60-68）

安装与部署提示

1. 上传到支持 PHP 的 Web 服务器根目录，不能直接 file:// 打开（需 HTTP 执行 PHP）

1. 在 video/ 目录放入自己的 mp4 / mov 等视频文件，api.php 会扫描并返回随机视频

1. like.json 首次访问自动创建，无需手动建

截图与演示说明

常见问题

#### 能直接双击打开吗？

不能，因为用 fetch 调 PHP 接口且资源用绝对路径，必须跑在 PHP 服务器下才能加载视频与点赞。

#### 为什么打开没视频？

video/ 目录默认是空的，把视频文件放进去即可，api.php 会自动扫描目录返回视频地址。

安全风险提示

特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！

轻微配置提示：api.php 设置了 `Access-Control-Allow-Origin: *`，任意域可读视频列表，如需生产环境建议收紧跨域策略；like.php 仅做整数自增写 JSON，无明显注入面。未发现 eval、混淆或后门迹象。另：项目无 README，界面文案来自”心动造页”页面服务，定位为模板 / 演示站。

下载说明

源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。