今日概览
今天主要完成了三件事:
- 修复 nano-video 项目的 DOM 节点错误
- 整理 AI 视频生成提示词文档
- 使用 FFmpeg 拼接视频并上传到 R2
一、Bug 修复 - DOM 节点错误
问题描述
每次打开网站时出现以下错误:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this nodeFailed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node
修复内容
| 文件 | 问题 | 解决方案 |
|---|---|---|
BaiDuAnalytics.tsx |
直接 DOM 操作 insertBefore/appendChild |
改用 Next.js Script 组件 |
ToltScript.tsx |
直接 DOM 操作 appendChild |
改用 Script 组件 |
CookieConsent/index.tsx |
组件卸载后 setTimeout 仍执行 |
添加 isMounted 检查 |
TableOfContents.tsx |
scroll 事件中直接访问 DOM | 添加 isMounted 检查 |
downloadFile.ts |
DOM 移除时可能出错 | 添加 try-finally 保护 |
r2-download.ts |
同上 | 添加 try-finally 保护 |
layout.tsx |
Toaster 在 ThemeProvider 外部 |
移到内部 |
核心原因
React 18 的并发渲染模式与直接 DOM 操作产生冲突,导致组件卸载后仍尝试操作已移除的节点。
二、AI 视频提示词整理
生成了 8 个”无限美食空间”主题的视频生成提示词:
| 主题 | 核心元素 |
|---|---|
| 无限麻辣烫空间 | 红色木门、辣油货架、牛肚 |
| 无限牛排空间 | 炭火烤架、滋滋牛排、奢华氛围 |
| 无限水果派空间 | 发光货架、草莓塔、LED灯带 |
| 无限火锅空间 | 中式木雕、涮肉、蒸汽 |
| 无限饮料空间 | 黄铜水龙头、冰块、乳白液体 |
| 无限炒饭空间 | 牛膝骨炒饭、黑色货架 |
| 无限烤肉空间 | 旋转烤鸭、油脂流淌、工业风 |
| 无限辣条空间 | 红色零食、油亮质感 |
统一风格: 超现实主义 + Dolly In 推镜头 + 跟随镜头 + 特写切换
三、视频剪辑 - FFmpeg 拼接与 R2 上传
操作流程
1 | # 1. 创建文件列表 |
最终结果
- 本地文件:
D:/雨下雨停/OneDrive/文档/merged_f1_to_f8.mp4 - 文件大小: 46 MB
- 总时长: 1分4秒
- CDN 地址: https://cdn.nanobananavideo.net/website/showcase/merged-f1-to-f8.mp4
四、今日产出
- ✅ 修复 7 个文件的 DOM 操作相关 Bug
- ✅ 生成 8 个 AI 视频生成提示词文档
- ✅ 完成 8 个视频片段的拼接并上传到云端
- ✅ 创建视频剪辑教程文档