★ FEATURED ARTICLE 手里只有一个 ID 为什么抖音视频播放不了看 douyin-vue 中 aweme_id 与 video_id 的分工【免费下载链接】douyinVue3 Pinia 仿抖音Vue 在移动端的最佳实践 . Imitate TikTok Vue Best practices on Mobile项目地址: https://gitcode.com/GitHub_Trending/do/douyindouyin-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_idurl_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 :srcurlItem typevideo/mp4 /也就是说项目既不在用 aweme_id 查数据这步实时请求也不在用 video_id 拼地址这步现场计算只回放快照里现成的带签名 URL。这也是它能本地跑通、但播放链接会随时间逐渐失效的原因。容易混淆的坑列个清单两个 ID 不能互相推导aweme_id 与 video_id 取数路径完全不同别指望做一张映射表一劳永逸。别拿 aweme_id 拼播放 URLplay/?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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
