这次我们来看一个很特别的项目用纯 HTML CSS JS 复原 2006 年新浪娱乐视频播放界面。没有后端、没有框架、没有打包工具就是一个静态网页却把差不多二十年前的门户网站播放器视觉和交互搬回了浏览器里。更有意思的是这个项目是用 Vibe Coding 的方式做的也就是通过自然语言描述需求让 AI 辅助生成代码再人工微调。整体来看它不算复杂但非常适合拿来练手也能顺便把 HTML5 video 播放器、CSS 复古风格、JavaScript 交互串在一起过一遍。这个项目最值得关注的地方有三点。第一它选了一个非常经典的复古目标2006 年的新浪娱乐视频播放页那时候主流网页视频还依赖 Flash 播放器整个页面的配色、布局、控件样式都很有年代感第二它没有使用任何在线媒体服务而是用本地 video 标签模拟播放过程直接绕开 Flash 插件不可用的问题改造成本很低第三它完整跑了一遍 Vibe Coding 流程从“我想要一个复古播放器页面”到“帮我调整按钮样式”再到“给进度条加拖拽”每一步都能看到 AI 参与代码生成和作者人工修正的过程。本文会用项目复盘的方式带大家完整走一遍拆解 2006 年播放器页面的信息架构用 HTML 重构页面骨架用 CSS 复刻当年的配色和控件用 JavaScript 把播放、进度条、音量、全屏这些交互补上最后再聊聊用 Vibe Coding 写这类页面时怎么提需求、怎么验收 AI 生成的代码、怎么处理浏览器兼容问题。如果你对 HTML 网页制作感兴趣或者想试试用 AI 辅助写前端代码这篇可以直接收藏。1. 核心能力速览对于这类纯前端项目很多人第一反应是“这也能算项目”但恰恰是这类小项目最适合做技术验证。先看规格能力项说明项目类型纯静态 HTML 网页复原 2006 年新浪娱乐视频播放器界面技术栈HTML5 CSS3 原生 JavaScript运行环境任意现代浏览器不需要安装依赖不需要编译启动方式双击 HTML 文件或通过本地静态服务器访问后端依赖无构建工具无Vibe Coding 直接生成源码视频播放使用 HTML5 video 标签替代当年的 Flash 播放器核心功能视频播放/暂停、进度条、音量控制、全屏切换、复古皮肤批量任务不涉及但页面可以同时管理多个视频源采用类似播放列表的数据结构适合场景怀旧界面复刻、前端练手、Vibe Coding 工作流验证从表里可以看到这个项目对硬件没有任何特殊要求普通办公电脑浏览器就能跑。相比那些动辄要求高显存、高配置的 AI 项目这种复古网页复原项目门槛极低重点全在代码结构和设计还原上。核心目录也很简单通常就三个文件index.html、style.css、script.js。任何能打开浏览器的人都可以直接上手。这里要说明一点标题里的“渣技术”并不是贬义而是作者对“代码不一定优雅但能用”这种状态的自我调侃。用 Chat 型 AI 工具生成一批代码再把它们拼起来、修一修、跑通对很多非典型前端开发者来说就是 Vibe Coding 的日常。这个项目的代码本身也确实很朴素没有复杂的封装没有抽象工厂就是直接了当的“页面 样式 脚本”三件套。这种朴素反而带来了一个好处容易读、容易改、容易复刻。2. 为什么选择 2006 年新浪娱乐播放器界面先聊聊项目背景。2006 年前后的门户网站播放器页面和今天的视频网站有非常明显的差异。那时主流的视频播放方式是 Flash 播放器嵌入网页新浪娱乐、搜狐、网易等门户都有自己的视频频道。播放页通常由几部分组成顶部是新闻/频道的导航条中间是视频播放区域加标题和简介右侧是相关视频或新闻列表下方是评论区。页面整体信息密度很高视觉上不如今天干净但那个年代的用户已经习惯了这种“满满当当”的布局。那个年代的设计语言也很有特点页面宽度通常是固定居中背景偏白或偏灰蓝色和橙色按钮用得比较多标题文字习惯用加粗、下划线配合跳转链接整体风格偏“门户感”。字体方面页面大量依赖系统中文字体比如宋体、黑体而不是后来的 Web 字体。播放器周边会有细边框、工具栏按钮甚至带一点轻微的渐变效果。这些细节单独看都不起眼组合起来就是强烈的时间识别度。对这些视觉细节做逆向拆解是复原项目的核心工作。做 Vibe Coding 时也一样你首先得知道目标页面长什么样才能把需求描述得足够具体。如果直接跟 AI 说“给我做一个 2006 年的播放器页面”它大概率会生成一个四不像。只有把布局、配色、文字习惯、控件状态都拆出来AI 生成的代码才可能接近预期。所以这个项目表面上是在写前端实际上是在练习“视觉需求拆解”和“提示词表达能力”这两项能力在 AI 辅助开发时代越来越重要。从版权和合规角度也要说一句如果你是做历史界面复原实验目标是学习前端技术或者做个人怀旧项目这种思路没有问题。但如果你想把新浪、搜狐等页面原样复制用于商业用途或者直接使用其中的商标、Logo、图片素材就需要注意版权授权问题尤其是素材和品牌标识的使用边界。个人学习演示时可以尽量用占位文字、自绘图标代替真实品牌元素避免不必要的风险。3. Vibe Coding 是一种什么样的工作方式Vibe Coding 这个词最近在技术圈讨论很多核心意思是用自然语言和 AI 模型对话让 AI 生成代码开发者负责描述需求、验收结果和修修补补。这个项目的开发过程就是典型样本先描述页面整体结构再让 AI 生成 HTML 骨架接着提配色、控件、交互需求不断迭代推进。和传统开发方式相比Vibe Coding 有几个显著区别。第一代码更多是“对话出来的”而不是“敲出来的”工程结构依赖 AI 对需求的理解初始质量波动很大第二调试周期变短很多小问题直接让 AI 帮忙看省掉了大量搜索和阅读文档的时间第三对开发者读代码能力的要求反而提高了因为你至少要能判断 AI 生成的东西对不对。换句话说Vibe Coding 不会让前端基础变得不重要反而会更看重开发者对布局、样式、事件流的基本判断力。在这个项目里作者给 AI 的需求大概分了三层。第一层是页面结构比如“一个 2006 年风格的门户播放页面顶部导航左侧视频区右侧列表区底部评论区”第二层是视觉细节比如“主色调用蓝色和橙色背景接近灰色按钮要有渐变效果”第三层是交互逻辑比如“进度条可以点击跳转播放/暂停按钮要切换状态音量滑块是竖直的”。每一层都依赖 AI 对网页的理解也都需要后续人工修正。这种工作方式适合什么样的项目从这次的实践看适合 UI 复原、原型验证、小工具开发这类“需求明确、边界清晰”的任务。不适合特别复杂的业务系统因为 AI 很难在一段对话里把握全局状态也不适合对性能有极端要求的场景因为 AI 生成的代码通常优先保证可用性而不是性能。Vibe Coding 更接近“快速实现”而不是“架构设计”搞清楚这一点对 AI 生成代码的预期管理会很有帮助。4. 界面拆解2006 年播放器页面的信息架构开始写代码之前先把 2006 年新浪娱乐视频播放页的信息架构拆清楚。这里参考历史资料和普遍记忆中的页面形态当年播放器页面大致包含以下模块。第一个是顶部导航区。门户风格的页面上方通常有频道导航比如新闻、娱乐、体育、财经等下面可能还有子频道或者面包屑。这个区域在复原项目里可以简化但不能没有否则页面一眼就不会觉得“像当年”。导航的高度、背景色、链接排列方式决定了一整页的“门户基因”。第二个是主体内容区通常是一个居中的大块白色或浅色区域。里面左侧是视频播放器主体播放器周围有边框、控制条、标题和播放/暂停按钮右侧是一列视频推荐链接标题通常带下划线鼠标悬停有变色效果。左右两栏布局是复盘时的重点很多复古感都来自这种分栏比例和间距关系。第三个是视频信息区。播放器下方会有一行视频标题、发布时间、点击量、分享按钮等。2006 年的页面里标题一般比较朴素按钮可能是“复制链接”“收藏”这类带有明显时代感的文字按钮和今天满屏图标按钮的交互方式不同。第四个是评论区。那时候的评论区样式非常简单基本是一行输入框外加“发表评论”按钮下面列出用户评论。当前主流视频网站的高级回复、点赞、踩等功能都不用做因为做了反而不像这段历史的“简陋感”本身就是氛围的一部分。把这些信息架构确定下来之后再考虑配色和字体主色拿蓝色和橙色做视觉焦点背景用浅灰文字用黑色、蓝色和灰色组合。整页宽度可以固定布局例如 1000px 左右居中保持老门户的观感。给 AI 描述需求时按这个架构分段描述是最有效的先描述顶部导航再描述播放器区域然后是右侧列表和评论区AI 会按照你给的顺序逐步生成代码比一次性让它生成整页更容易控制结果。5. 用 HTML 搭建复古页面骨架页面骨架是整个复原项目的基础。下面是一段接近实际项目的 HTML 结构示例目录结构很简单一个index.html、一个style.css、一个script.js。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title新浪娱乐视频播放 - 2006 复古版/title link relstylesheet hrefstyle.css /head body !-- 顶部导航 -- div classtop-nav div classnav-inner span classlogo新浪娱乐/span a href#新闻/a a href#娱乐/a a href#体育/a a href#财经/a a href#博客/a a href#视频/a /div /div !-- 主体播放区 -- div classmain-wrap div classplayer-panel div classplayer-header h1视频某音乐盛典现场直击2006/h1 span classmeta2006-06-18 12:30:00/span /div div classplayer-box video idplayer controls preloadmetadata posterposter.jpg source srcsample.mp4 typevideo/mp4 您的浏览器不支持 HTML5 视频。 /video /div div classplayer-tools a href# classbtn复制链接/a a href# classbtn收藏视频/a a href# classbtn分享给好友/a /div /div !-- 右侧推荐 -- div classside-list h3相关视频/h3 ul lia href#某歌手演唱会全程实录/a/li lia href#娱乐现场明星专访/a/li lia href#影视剧开机发布会/a/li lia href#周末综艺精彩片段集锦/a/li /ul /div /div !-- 评论区 -- div classcomment-area h3发表评论/h3 textarea idcommentInput rows3 placeholder说点什么吧/textarea button idcommentBtn classbtn发表评论/button ul idcommentList/ul /div script srcscript.js/script /body /html骨架里面有几个设计细节需要注意。第一整个页面结构是从上到下、从左到右的传统门户布局这种结构决定了页面的“身份认同”第二video 标签的controls属性可以先保留等后续 CSS 定制完再隐藏默认控件自己重画一套复古风格的控件第三右侧推荐列表和评论区都用ul/li组织因为 2006 年页面里的推荐、评论基本都是链接列表。用 Vibe Coding 生成这类骨架时提示词可以这样写“请用 HTML5 写一个 2006 年门户网站风格的视频播放页面要求有顶部导航、左侧播放器、右侧推荐列表、底部评论区播放器使用 video 标签不需要 footer。” 这样 AI 会立即理解你要的是页面结构而不是业务逻辑。骨架写完之后下一步是 CSS。对于复古界面CSS 的作用比 HTML 更重要因为年代感主要由视觉细节体现。6. 用 CSS 复刻复古配色和控件风格2006 年新浪娱乐播放器页面的视觉风格可以归纳为几个关键词固定宽度、浅灰背景、蓝色链接、橙色按钮、边框线。下面这段 CSS 集中处理这些特征。/* 页面全局 */ body { margin: 0; background: #e8e8e8; font-family: SimSun, 宋体, serif; color: #333; } .top-nav { background: #1a4f8b; height: 40px; border-bottom: 3px solid #ff7700; } .nav-inner { width: 1000px; margin: 0 auto; line-height: 40px; } .nav-inner a { color: #fff; text-decoration: none; margin-right: 22px; font-size: 14px; } .nav-inner a:hover { color: #ffff00; text-decoration: underline; } .logo { font-size: 21px; font-weight: bold; margin-right: 30px; color: #fff; } .main-wrap { width: 1000px; margin: 20px auto; overflow: hidden; } .player-panel { float: left; width: 700px; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .player-header h1 { font-size: 18px; margin: 0 0 6px 0; } .meta { font-size: 12px; color: #999; } .player-box video { width: 100%; background: #000; border: 1px solid #cccccc; } .player-tools { margin-top: 8px; } .btn { display: inline-block; background: linear-gradient(to bottom, #ff8c1a, #ff6600); border: 1px solid #cc5500; color: #fff; font-size: 13px; padding: 4px 12px; text-decoration: none; cursor: pointer; } .btn:hover { background: linear-gradient(to bottom, #ffa53b, #ff7700); } .side-list { float: right; width: 270px; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .side-list h3, .comment-area h3 { font-size: 16px; color: #1a4f8b; border-bottom: 1px solid #eeeeee; padding-bottom: 6px; } .side-list ul { list-style: none; margin: 0; padding: 0; } .side-list li { padding: 6px 0; border-bottom: 1px dashed #f0f0f0; } .side-list a { color: #1a4f8b; text-decoration: underline; font-size: 13px; } .side-list a:hover { color: #ff6600; } .comment-area { width: 1000px; margin: 20px auto; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .comment-area textarea { width: 98%; border: 1px solid #cccccc; font-family: SimSun, 宋体, serif; font-size: 13px; } .comment-area .btn { margin-top: 8px; }CSS 复刻的重点不在代码复杂度而在“关键词还原”。这一段样式基本还原了当年页面的几个典型特征顶部深蓝导航条配橙色下边框、文字链接有下划线、按钮是橙红色渐变、页面是 1000px 左右的固定宽度、背景是浅灰色。这些视觉符号放在一起年代感就出来了。如果你想让 AI 继续优化这些样式可以这样追加提示词“顶部导航的字体再大一点播放器标题改成 18px按钮改为橙色渐变右侧列表链接使用蓝色下划线。” 对 Vibe Coding 来说这类微观调整需求非常适合迭代对话。不过也要注意AI 对颜色值的理解需要你用具体色号来约束不然它可能会给出偏现代风格的渐变和圆角。还有一点默认的 video 控件并不符合复古风格所以下一步要用 JavaScript 隐藏默认控件绘制自定义控制条。7. 用 JavaScript 实现播放交互页面要“活”起来离不开 JavaScript。这部分主要实现视频播放/暂停、进度条点击跳转、音量控制、全屏切换和评论发布。由于是演示项目代码不做复杂封装以清晰为主。const video document.getElementById(player); const playBtn document.getElementById(playBtn); const progress document.getElementById(progress); const volume document.getElementById(volume); const fullscreenBtn document.getElementById(fullscreenBtn); video.removeAttribute(controls); playBtn.addEventListener(click, () { if (video.paused) { video.play(); playBtn.textContent 暂停; } else { video.pause(); playBtn.textContent 播放; } }); video.addEventListener(timeupdate, () { if (video.duration) { progress.value (video.currentTime / video.duration) * 100; } }); progress.addEventListener(input, () { if (video.duration) { video.currentTime (progress.value / 100) * video.duration; } }); volume.addEventListener(input, () { video.volume volume.value; }); fullscreenBtn.addEventListener(click, () { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } }); // 评论发布 const commentBtn document.getElementById(commentBtn); const commentList document.getElementById(commentList); commentBtn.addEventListener(click, () { const input document.getElementById(commentInput); const text input.value.trim(); if (!text) return; const li document.createElement(li); li.textContent text; commentList.appendChild(li); input.value ; });这段代码实现了最核心的播放控制逻辑。注意两个点第一video.removeAttribute(controls)用来隐藏浏览器默认控件这是为了能在下方放一套自定义复古控制条第二timeupdate事件会高频触发进度条的值会持续更新这是进度同步的标准做法。代码里几个元素 ID 需要和 HTML 对应比如播放按钮、进度条、音量滑块都要在页面里真实存在否则事件绑定会直接报错。Vibe Coding 在交互部分的价值在这里体现得比较明显。你可以直接说“我要一个视频播放器带播放暂停按钮、进度条、音量控制、全屏键点击播放时按钮文字要切换”AI 会很快给出类似的实现。不过 AI 生成的事件绑定逻辑有时候会漏掉边界情况比如视频没加载完时点击进度条、音量滑块的取值范围没有设置好这些都需要自己检查。像progress.value在没有设置min和max属性时默认取值范围是 0 到 100这个行为要心里有数。页面完整跑起来之后还需要做一个“仿古控件层”。也就是在 video 元素下方放一排用 CSS 画好的按钮和滑块布局上要像 2006 年 Flash 播放器的控制条黑底、白字、细边框、按钮边缘带浅色描边。这一层不需要改 JavaScript 逻辑主要靠绝对定位或 flex 布局完成。控制条做成区块后整个页面的“播放器感”会明显增强。8. Vibe Coding 实操从需求到成品的迭代过程这个项目最有参考价值的部分其实是 Vibe Coding 的实操过程。下面把经验拆成可复用的五步按顺序走下来基本能跑通。第一步写粗略需求。不要一上来就说“帮我写一个完整播放器”而是先给一句话定位“用纯 HTML/CSS/JS 做一个 2006 年新浪娱乐风格的视频播放页面。” 这会让 AI 先生成一个页面级框架而不是眉毛胡子一把抓。第二步分段细化。页面框架出来以后按“顶部导航 → 播放器 → 推荐列表 → 评论区”的顺序逐段提出修改要求。每一段都描述具体样式比如“导航背景深蓝色、下方加橙色分割线”“播放器区域占左侧 700px右侧列表占 270px”。这样 AI 能理解你期望的布局比例。第三步处理视觉细节。这步最耗时。AI 生成的默认样式通常比较现代直接套用没有年代感。需要反复要求“把字体改成宋体”“按钮改成橙色渐变”“链接加下划线”“背景改成浅灰色”。如果 AI 给出的颜色不对直接丢色号给它比如#1a4f8b、#ff6600、#e8e8e8它会按要求调整。第四步检查交互逻辑。AI 代码里常见的坑包括play 按钮不切换文本、进度条没有设置max属性、音量初始值不是 1、评论为空时没有禁用提交。这些状态管理问题AI 容易遗漏人工补充最有效。检查时要按用户视角走一遍完整流程而不是只看代码是否报错。第五步本地验收。在浏览器里过一遍完整流程看有没有报错、布局有没有错位、播放器是否在窄屏下崩溃。如果发现问题再把问题描述给 AI让它生成补丁。比如“进度条拖拽时视频跳转不稳定请加防抖”AI 可能会给出节流方案你再把它合并进现有代码。五步走完之后一个 Vibe Coding 复古页面项目就算完成。整个过程不要求手写每一行代码但要求你具备读代码、改 Bug、验收效果的能力。这也是“渣技术但不妨碍能跑”的核心代码不一定要多规范但状态要可控、页面要可用。9. 资源占用与性能观察纯 HTML 页面对资源占用几乎可以忽略但这不代表不需要关注性能。这个页面涉及几个性能点值得单独拿出来说。第一页面体积。HTML、CSS、JS 三个文件加起来通常不到 20KB对网络加载几乎没有压力但视频文件本身可能很大。测试时建议使用小尺寸 MP4 文件或者用poster封面图代替长时间播放否则本地资源文件过大会拖慢页面响应。如果想把项目放到线上展示建议把视频压缩成 720p 以内的短视频循环播放。第二Video 播放占用。视频解码会消耗 CPU 和内存尤其在浏览器里播放高清视频时。作为演示可以把视频分辨率控制在 720p 以内并且不建议同时开多个播放器实例。Vibe Coding 项目经常出现“代码很简单但页面卡”的情况排查时先看是不是视频源太大而不是一上来就优化 JavaScript。第三样式和布局开销。这个页面用的是固定宽度布局结构简单没有 CSS 动画和复杂滤镜浏览器渲染压力很小。进度条timeupdate更新频率默认较高但不是性能瓶颈如果发现鼠标拖动卡顿可以给进度条加节流。现代浏览器对这类基础 DOM 操作的处理能力很强真正要关注的是高频事件触发次数。观察资源占用的方法很简单浏览器按 F12切到 Performance 或 Network 面板看体积加载和帧率情况。对这个项目来说通常不会有明显瓶颈更多是视频源本身的问题。另外如果你把这个页面放在本地双击打开浏览器可能会因为file://协议限制某些功能比如视频本地文件读取这时用 VS Code Live Server 或 Python 起一个静态服务器会更稳。10. 常见问题与排查方法这个项目的排错重点集中在浏览器兼容、视频格式、布局错位和 AI 生成代码质量上。以下是实际开发中容易遇到的问题和排查思路。问题现象可能原因排查方式解决方案页面打开后无样式控制台 403 或 CSS 路径错误打开 Network 面板看 style.css 是否加载确认 CSS 文件名和路径大小写一致video 标签不显示画面视频文件格式不支持或文件路径错误看控制台报错确认 source src换用 MP4/H.264 编码文件或检查相对路径播放按钮点击无效JS 文件未加载或 video 元素 ID 不一致看 Console 报错检查 getElementById统一元素 ID确认 script 标签在 body 底部进度条无法点击跳转progress 没有设置 min/max 或 video.duration 为 NaN打印 video.duration 检查元数据给 video 加 preloadmetadata评论按钮没反应输入框 trim 为空时直接 return在按钮事件里加 console.log先输出输入内容再判断页面在手机上变形固定宽度 1000px 在小屏溢出用浏览器设备模拟检查加 meta viewport 或后续改响应式AI 生成代码有多个重复函数多轮对话后 AI 容易重复堆代码检查 script.js 末尾是否有重复定义人工删除旧版本保留最新实现表格里这些问题大多都能在本地快速复现和解决。用 Vibe Coding 做项目时最常见的坑其实是“AI 在同一份文件里生成多个矛盾版本”尤其是多轮对话后。解决办法是养成随手清理旧代码的习惯不要让 AI 越改越乱。每完成一轮修改就把确认有效的代码复制到本地文件保存不要一直依赖对话窗口里的中间版本。另一个容易忽略的问题是浏览器差异Chrome、Edge、Firefox 对 video 标签、全屏 API、样式细节的兼容性有细微差异。比如全屏 API 在某些浏览器里需要前缀进度条 input 样式也可能不同。发布前至少要在两三种浏览器里过一遍尤其是你计划把页面分享给别人的时候。11. 最佳实践与使用建议结合这个复古网页项目给读者几条可落地的建议。第一先搭骨架再谈样式。无论是不是 Vibe Coding先让页面有正确的 HTML 结构再往里面填视觉细节。结构错了后面所有 CSS 都是白调。如果你发现 AI 生成的代码里结构混乱第一件事不是改样式而是把 HTML 层级重新理清楚。第二给 AI 的需求要“分段且具体”。不要只说“做复古一点”要说“导航背景深蓝、按钮用橙色渐变、链接加下划线、宽度固定 1000px”。AI 对具体词汇的响应远好于抽象风格描述。色号、像素值、字体名这些硬参数可以帮助 AI 跳过试错过程。第三保留一份最小可用版本。项目过程中随时保存能跑的版本改坏了随时回退。不要等到最后才提交否则 AI 生成的几次版本混在一起很难收拾。可以用index_backup.html这种方式保留关键节点也可以直接把稳定版本推到 Git 仓库。第四素材要合规。复原老页面时建议不要直接使用新浪、搜狐等网站的现实商标、Logo 和高清截图。可以用占位文字、自绘图标、开源或无版权图片替代。个人学习演示问题不大商用前一定要确认授权尤其是涉及人物肖像、品牌 Logo、新闻素材的视频源文件。第五测试要在多浏览器过一遍。Chrome、Edge、Firefox 对 video 标签、全屏 API、样式细节的兼容性有细微差异发布前至少各看一遍。如果页面是在本地双击打开的建议再起一个静态服务器测试避免file://协议带来的限制。第六如果后续想扩展可以把页面改造成响应式布局加入视频列表数据渲染甚至写一个简单的播放器组件。这些都能在现有骨架上继续迭代。例如右侧列表的数据如果从 JSON 文件异步读取整个页面就变成了一个“数据驱动”的静态站点仍然不需要后端。12. 总结与下一步这个项目的价值不在于代码量而在于把“复古界面复原”和“Vibe Coding 工作流”结合起来让人看到纯前端项目也能有明确的学习路径。它最值得尝试的点是用自然语言驱动 AI 生成一整页复古 UI再通过人工修改把设计细节拉回 2006 年整个过程能同时练到 HTML 结构、CSS 视觉和 JavaScript 交互三块基础。最先应该验证的功能是视频播放控制确认 video 能加载、进度条能拖动、按钮状态能切换。最容易踩的坑是 AI 生成代码里多版本冲突和浏览器对 video 元数据的加载时机这两点直接影响页面是否“能玩”。后续可以扩展的方向也很多把右侧列表改成从 JSON 读取、给播放器增加“小窗播放”、把所有样式迁移到 CSS 变量甚至用同一个思路去复原其他经典老页面。反向做一轮“现代页面复古化”也是一个不错的练手题目。如果你正好在学前端基础或者想试试 Vibe Coding 的边界用这个项目起步很合适。关注点在代码能不能跑、界面像不像、交互顺不顺三项都能过这个项目就算真正落地了。