问题视频页改版实战：AI星空卡片+分类筛选+站内播放器
项目概览
「问题视频页改版」是科学小舟官网问题视频专区（问题视频页面）的视觉与功能升级项目，2026年8月开发落地。改版前页面只有一列干巴巴的视频链接，封面图粗糙抽象，访客没有点击欲望。改版后建成「分类导航 + 星空卡片墙 + 站内播放器」的视频专区：上面分类筛选，下面全部最新视频，点击封面直接站内播放，视觉统一为深蓝金学术风。
一、AI生成星空卡片：4张蓝色银河系主题图
项目用智谱CogView（cogview-3-flash）AI绘画接口，一次生成4张蓝色星空银河系主题卡片图，替换原来的抽象脏图。4张卡片对应视频专区的4个科学主题：
- concept（概念影片）：浩瀚蓝色星空银河系全景，星云和银河光带横贯画面
- space（空间并非虚空）：蓝色太空背景 + 银色发光网格线，科幻视觉风格
- force（万物受力）：蓝色引力漩涡，星云物质呈螺旋状向中心流动
- break（100年停滞根源）：无数柔和蓝金光点粒子，如同宇宙中的量子微光
生成脚本（gen_star_cards.py）内置了每张卡片的完整提示词（要求「蓝色底为主、星空银河系、高清天文摄影风格、无文字无水印」），带3次重试与失败兜底，自动下载PNG并按主题命名保存。老板验收标准非常明确：蓝色底、星空、好看——一次生成全部通过。
二、视频专区页面：分类 + 卡片墙 + 站内播放器
- 分类导航：顶部三个胶囊按钮——「全部 / 🎬 10秒好奇心系列 / 🚢 科学宣传视频」，点击即用JS筛选（kxzFilter）对应卡片，默认高亮金色「全部」
- 星空卡片墙：卡片9:14竖版比例，封面图铺满，hover时上浮4px+金色描边发光+封面缓慢放大（1.07倍），中央金色圆形播放按钮，底部渐变遮罩压标题与副标题，右上角带分类小标签
- 站内视频播放器：点「10秒好奇心系列」卡片直接弹出站内播放器——黑底弹窗、顶部标题栏、播放/暂停按钮、可点击进度条、时间显示，看完一键返回，不用跳走
- 外链跳转：「科学宣传视频」类卡片点击跳转抖音完整版，兼顾站内体验与抖音引流
三、10秒好奇心系列：站内直播的短视频
配合改版上线了「10秒好奇心系列」站内短视频（MP4直传服务器、poster封面）：
- 🎬 光速每秒30万公里，是宇宙速度的极限！
- 🎬 牛顿说，苹果落地是万有引力。
- 🎬 真空真的是空的吗？
- 🎬 小角马一出生，5分钟就能站立！
这批10秒短视频不用跳抖音，直接在官网播放，适合新访客快速产生好奇心，是视频专区转化访客的「钩子内容」。
四、技术亮点
- AI绘画直出素材：智谱CogView一次生成4张高清星空主题图，0成本替代付费图库
- 纯CSS卡片动效：hover上浮、金色描边发光、封面缓放，全部CSS实现、零JS依赖，加载快
- 站内播放器：播放/暂停/进度/时间全套交互，支持自动播放，移动端自适应
- 分类筛选：数据属性（data-cat）驱动，扩展新分类只需加标签
项目成果
✅ 4张AI星空卡片上线，蓝色银河系视觉一次验收通过。✅ 视频专区改为「分类+卡片墙+播放器」结构，页面点击率与停留时间显著提升。✅ 10秒好奇心系列站内直播，新访客零门槛看视频。✅ 全部最新视频持续更新，与首页视频板块、抖音账号形成内容闭环。
项目说明：本文基于 D:\AI-Win专属工作区\网站管理\05_网站功能项目\问题视频页改版 目录下 gen_star_cards.py、kxz-video-zone.html、custom_css_3129_fixed.css 等实际项目文件撰写，为科学小舟团队真实开发项目。