科学宣传视频专区实战：抖音自动同步+首页四框动态展示
项目概览
「科学宣传视频专区」是科学小舟官网（www.kexuexiaozhou.cn）的抖音科普视频展示阵地，2026年7-8月开发落地。项目解决两个真实问题：一是抖音账号（科学小舟）持续产出科普短视频，但官网没有展示入口；二是人工把视频搬到官网又慢又容易漏。最终建成「抖音自动同步 → 封面下载 → JSON数据驱动 → 首页四框动态展示」的完整链路，首页视频区实时跟随抖音更新，最新视频自动替换最旧的。
一、核心流程：抖音视频自动同步四步走
同步脚本（sync_douyin_videos.py）跑通了一条全自动链路，真实执行流程如下：
- 第1步 自动拉取：用Playwright打开抖音账号主页，带上登录态Cookie，通过抖音网页接口拉取账号最新30条作品列表（视频ID、描述、封面地址、发布时间）。
- 第2步 智能过滤：自动剔除无关视频——按关键词黑名单过滤「排水工程、音乐种草、纯享版、豆包直接生成」等与科普无关的内容，保证上官网的都是正经科普视频。
- 第3步 封面下载与标题映射：自动下载每支视频的封面图到本地covers目录；TITLE_MAP手工映射表把认识的视频ID映射成清晰标题+副标题（如「真空不空｜空间充满物质」），新视频自动用抖音描述兜底。
- 第4步 上传服务器：封面图通过SCP上传到WordPress的uploads目录，视频库JSON（kxz-douyin-videos.json）同步到服务器，首页4个框动态读取该JSON——最新视频自动替换最旧，无需人工改页面。
二、首页「科学宣传视频」板块
首页视频板块采用深蓝渐变背景（#0f1b2d→#1a2f4a）配学术金点缀，与全站学术蓝金视觉统一。每个视频卡片包含：
- 竖版封面图：9:16比例、object-fit:cover裁切，点击直接跳转抖音播放完整视频
- 金色播放按钮：悬浮在封面中央，悬停有放大和光晕动效，引导明确
- 底部渐变遮罩：保证标题文字在任何封面上都清晰可读
- 「🎬 抖音观看完整视频」标签：金色描边胶囊，强化行动指引
- 双入口导流：板块下方「更多问题视频 →」和「有问题，找科学小舟 →」两个按钮，把首页流量导到视频专区与问答工具
三、视频库数据驱动
// kxz-douyin-videos.json 单条视频数据示例
{
"id": "7664973403417218356",
"title": "真空不空",
"sub": "空间充满物质",
"desc": "#科学小舟 #基础科学 #物理科学",
"cover_url": "https://www.kexuexiaozhou.cn/wp-content/uploads/2026/08/kxz_promo_7664973403417218356.jpg",
"douyin_url": "https://www.douyin.com/video/7664973403417218356/",
"alt": "真空不空"
}
首页4个视频框通过PHP直接读取这个JSON动态渲染：新视频一到，最旧的自动被顶掉，页面零人工维护。目前库内已有「扬帆远航、黑洞·现代宇宙科学、宇宙大爆炸？、真空不空、AI时代更需要正确的基础科学、问小舟·科学问答」等10余支科普视频。
四、技术亮点
- Playwright自动化拉取：真实浏览器会话+登录态Cookie，稳定拿到抖音作品列表，不依赖易失效的第三方接口
- 关键词黑名单过滤：自动剔除无关视频，保证官网内容纯净
- JSON数据驱动：首页四框动态读取，新增视频自动替换，零人工维护
- 标题映射表兜底：认识的视频显示清晰标题，新视频自动用抖音描述，展示永远不空
项目成果
✅ 抖音→官网视频自动同步链路全部跑通，新增科普视频全自动上首页。✅ 首页科学宣传视频板块上线，深蓝金视觉与全站统一，点击封面直达抖音播放。✅ 10余支科普视频入库动态轮换，页面长期零维护。✅ 视频板块与问题视频专区、问答工具互链，形成「看视频→学知识→提问题」的内容闭环。
项目说明：本文基于 D:\AI-Win专属工作区\网站管理\05_网站功能项目\科学宣传视频 目录下 sync_douyin_videos.py、kxz-douyin-videos.json、promo_video_page_v2.html 等实际项目文件撰写，为科学小舟团队真实开发项目。