手里只有一个 ID 为什么抖音视频播放不了？看 douyin-vue 中 aweme_id 与 video_id 的分工

【免费下载链接】douyinVue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin

douyin-vue 是一个基于 Vue3 + Pinia 的仿抖音移动端信息流，靠 mock 层回放本地快照实现抖音视频播放。本文讲清 aweme_id 与 video_id 两个标识的分工与流转，直接解决"拿着 ID 却查不到、播不了"的问题。

开篇：自己拼播放地址时的 403 现场

你手里攥着7265649807396474112这串 19 位数字，把它塞进play/?video_id=...这种形式的 URL 发出去，服务端直接拒绝。原因不复杂：这个查询参数只认以 v 开头的 video_id，传 aweme_id 进去，等于拿着作品的登记号去文件仓库提货，两个 ID 分属不同体系，互相顶替必然失败。

别忽略的是：就算拿到了正确的 video_id，自己现拼播放地址也常常失败。因为完整 URL 里除了 video_id，还有file_id文件指纹和sign签名，而 sign 带有时效。所以"有 ID"不等于"能播放"。

aweme_id 负责"哪条作品"，所有查数据的请求都走它

aweme_id 是 19 位纯数字，指向"这条作品"本身。查详情、查评论、查作者的作品列表，抖音的服务端接口大多以它为入参。在 public/data/videos.json 里，每条记录顶层都有一个aweme_id字段，和标题、统计数字这些"元信息"待在一起。

评论模块是典型消费方。node/comment/process.js 里维护着一份 aweme_id 列表，把抓回来的评论大 JSON 逐条切开：

let video_comments = data.filter((a) => a.aweme_id == v) fs.writeFileSync(`./video_id_${v}.json`, JSON.stringify(video_comments, null, 2))

注意拆分后的文件：文件名前缀是video_id_，里面的数字却是 aweme_id。这种命名混用是新手最容易绕晕的地方，后文再展开。

video_id 负责"哪个文件"，它藏在 play_addr 里

video_id 以 v 开头，后面跟一串字母数字，如v0300fg10000cna0c8bc77ufge7emlsg。它指向"这个视频文件"，在数据里的位置略隐蔽——不在顶层，而在video.play_addr下面：

"aweme_id": "7265649807396474112", "video": { "play_addr": { "uri": "v0300fg10000cna0c8bc77ufge7emlsg", "url_list": ["https://www.douyin.com/aweme/v1/play/?video_id=...&sign=..."]

url_list：一组带 sign 签名的播放地址

拆开拼好的 URL，能看到video_id、file_id、sign三个查询参数。这说明 video_id 单独换不回文件，必须配合签名才能取数。所以快照数据里直接存的就是拼好的完整 URL 列表，而不是留个裸的 video_id 让你现场组装。

自己准备数据时，如何获取 video_id 的两个入口

想做一份自己的本地仿抖音项目数据，video_id 有两个常见来源：

• 浏览器抓包：在抖音 PC 网页版打开任意视频，开发者工具 Network 面板过滤play关键字，视频开始加载时会出现play/?video_id=...形式的请求，参数值就是你要的值。
• 接口响应里直接读：作品列表接口的返回中，video.play_addr.uri就是 video_id，url_list是拼好的播放地址。项目里 node/post/process-post.js 干的就是这类整理：按字段白名单裁剪原始响应，只留前端需要的字段，再合并进本地用户视频列表。

白名单裁剪的做法值得借鉴：抖音接口字段不定期调整，把适配逻辑集中在数据处理层，前端就能保持不动。

mock 回放链路：douyin-vue 为什么不实时算播放地址

两个 ID 说清后，再看项目里的流转。前端所有接口定义集中在 src/api/videos.ts：推荐流、我的视频、评论列表，都只是"发请求、收数据"。真正的后端是假的：src/mock/index.ts 用 axios-mock-adapter 拦截这些请求，把本地快照数据按页切片返回。这就是完整的 mock 数据回放链路，全程不依赖真实网络。

播放端更省事。src/components/slide/BaseVideo.vue 不自己拼地址，直接把数据里的play_addr.url_list喂给 video 标签：

<source v-for="(urlItem, index) in item.video.play_addr.url_list" :src="urlItem" type="video/mp4" />

也就是说，项目既不在"用 aweme_id 查数据"这步实时请求，也不在"用 video_id 拼地址"这步现场计算，只回放快照里现成的带签名 URL。这也是它能本地跑通、但播放链接会随时间逐渐失效的原因。

容易混淆的坑，列个清单

• 两个 ID 不能互相推导：aweme_id 与 video_id 取数路径完全不同，别指望做一张映射表一劳永逸。
• 别拿 aweme_id 拼播放 URL：play/?video_id=只认 v 开头标识，传错类型直接失败。
• 播放地址 sign 会过期：本地快照相当于"照片"，存放越久失效链接越多，做长期服务需定期刷新数据。
• 评论拆分文件名会误导：文件前缀是video_id_，里面数字是 aweme_id，查数据以字段为准。
• 接口结构会变：返回字段不固定，白名单裁剪脚本就是为隔离这种变化而存在。

一句话串起来：aweme_id 解决"哪条作品"，video_id 解决"哪个文件"，sign 解决"此刻能不能播"，douyin-vue 把三步都交给数据快照，前端只管回放。想自己跑一份，git clone https://gitcode.com/GitHub_Trending/do/douyin拉代码，装好依赖启动开发服务器，再把浏览器切到手机模拟模式预览即可。

【免费下载链接】douyinVue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyin