纯HTML实现视频网站页面：单文件播放器与分类筛选-代码聚汇网

这几天帮朋友赶一个视频网站页面的演示需求，时间很紧，对方要求不看设计稿也能点开浏览器就看到完整效果。我第一反应不是去初始化一个 Vue 项目，而是直接开一个纯 HTML 文件。别小看这种老打法，如果你只是要一个“看起来像视频网站、能播视频、能点卡片切换内容”的前端演示，纯 HTML 反而快得多，不需要安装依赖、不需要启动开发服务器，双击文件就能跑。

这个项目最终做成一个单文件版本：用一个 index.html 把结构、样式、脚本全部装进去，页面包含顶部导航、视频分类筛选、视频卡片网格、以及一个支持点击切换内容的播放器区域。源码在下面会完整放出，并逐段拆解每个模块为什么要这么写。无论你是前端初学者想练手，还是工作中需要在短时间内提交一个页面 demo，都可以直接参考这套实现，边看边改，比从零开始省很多事。

1. 先把边界讲清楚：纯 HTML 能实现的是“页面能力”，不是平台能力

很多人在网上搜索“用 HTML 做视频网站”时，是抱着做一个像 B 站、YouTube 那样的完整产品的预期。这里必须先把话说明白：纯 HTML/CSS/JS 能做的是视频网站的页面表现层，也就是用户能看到的界面、能进行的交互操作，但做不了账号体系、视频上传分发、弹幕存储、推荐算法这些需要服务器和数据库的东西。

这不是缺点，而是“纯 HTML 项目”的定位本身就是轻量演示和学习。

纯前端能支撑的视频功能包括：

用 HTML5 的 <video> 标签加载并播放本地或远程视频文件；
在多个视频地址之间动态切换，模拟“点进详情页观看”的体验；
用 JavaScript 维护一份前端视频列表数据，渲染出推荐卡片；
通过 CSS 搭建仿主流视频网站的深色界面，包括顶栏、分类标签、卡片网格和响应式布局；
做基本的页面内跳转和状态切换，比如“首页网格”和“播放详情”之间切换。

不能支撑的典型场景，是类似 HLS 直播流和防盗链播放。浏览器原生 <video> 不能直接播放 .m3u8 格式，要额外借助 HLS 相关的 JS 库；还有如果视频接口做了校验和签名，纯前端也无法绕过去拿流地址。所以我把这个项目的源码定位成“一个能直接播放浏览器兼容格式视频的展示型网站”。

项目里用到的视频格式通常是 .mp4 和 .webm。.mp4 要注意编码必须是 H.264 + AAC，很多剪辑软件默认导出的编码并不是网页兼容编码，这会导致页面报错或黑屏。如果你手头的视频拖进浏览器标签页不能直接播放，放进 <video> 同样不能播放，可以先用格式工厂或 FFmpeg 转成网页常用格式。

从开发流程上看，纯 HTML 的另一个优势是原型验证成本极低。想在 UI 上调整一个卡片尺寸、想改一下推荐位排序、想看看某种交互手感，直接改代码保存后刷新浏览器即可，不需要等待热更新和打包。我在很多次项目启动阶段都是用单文件先做内部走查，确认信息和交互没问题后，再把这个原型视觉还原到正式技术栈里。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 功能划分和页面信息架构：动手写代码前先画一张“用户动线图”

很多 HTML 新手拿到任务就急着写 div，结果写到一半发现页面结构撑不起来。我的习惯是先想清楚一件事：用户在这个页面上会做哪些动作？

这个视频网站项目的核心动作有三个。

第一，打开页面后能在推荐网格里浏览视频。第二，看到感兴趣的封面后点击，页面中间播放器更新为对应视频并开始播放，同时旁边显示标题、分类、简介这些关键信息。第三，想换内容时，能点击顶部的分类按钮或搜索框快速过滤视频列表。

围绕这三个动作，信息架构基本就固定了。

顶部导航区要放站点名称、搜索框和一个“分类入口”。播放器主区域放在页面视觉重心位置，桌面端通常采用主内容 + 侧栏的经典布局：左边大区域是播放器和视频标题/简介，右边是待播列表或推荐列表。视频封面卡片要能传递标题、时长、分类三个关键信息。

我还额外在顶部导航里放了一组分类筛选按钮，这样用户不必滚动到页尾就能缩小范围。按钮按分类筛选，搜索框按关键词匹配，两者的过滤结果作用在同一个视频列表，逻辑不复杂又没有割裂感。

为了运行时不依赖后端接口，视频列表数据直接以 JS 数组的形式写在页面里。每条视频记录包含 id、title、category、duration、description、video（视频地址）等字段。这样做的好处是数据层独立，后续如果接真实接口，只需要把数组替换成 fetch() 拿回来的 JSON 即可，页面渲染函数完全不用大改。

页面还预留了一个“如果还没有准备好视频素材，也能正常看界面效果”的降级方案：封面区域用渐变色块和视频标题组合生成，不依赖外部图片文件。真正点击视频卡片后，播放器会尝试加载 video 字段对应的文件，如果这个文件不存在，浏览器会触发视频加载失败事件，界面会给出提示。这套方案让我在写页面时不会被“找不到合适图片素材”卡住。

整体布局的目标是让用户不用思考就知道哪里可以点。交互路径越短，演示时的说服力越强。

3. HTML 层怎么写：头部规范、语义化标签和播放器结构

视频网站的 HTML 结构不复杂，但有几个细节值得展开说明。

3.1 文档头为什么是长这样

所有 HTML 文件打开后第一行通常是 <!DOCTYPE html>。这行声明的意思是告诉浏览器“请按现代标准模式解析这份文档”，不是普通注释也不是可有可无的装饰。如果漏了它，有些浏览器会进入怪异模式，盒模型、百分比尺寸的表现可能会和预期不一致。

紧接着的 <html lang="zh-CN"> 是告诉浏览器、搜索引擎和辅助工具，页面主要内容使用中文。lang 属性对无障碍工具很重要，屏幕阅读器会依据它选择正确的发音规则。再往下的 <meta charset="utf-8"> 声明字符编码，如果你在页面里写中文标题或内容，却漏掉这一行，浏览器很可能把 HTML 文件里的 UTF-8 编码猜成其他编码，最终出现乱码。我习惯在新建文件的第一时间就把这三行写完整，避免后续排查乱码或布局问题。

视口设置 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是移动端适配的基础，没有它，手机浏览器会用默认的 980px 宽度渲染页面，然后整体缩放，字号小得看不清，得不偿失。

3.2 用语义化标签组织页面区块

我在这个页面里用的不是满屏嵌套的 <div>，而是把页面骨架完整地用语义化标签写出来：<header> 放导航搜索区，<main> 放主播放区域，<aside> 放推荐列表，<footer> 放版权说明。对开发者来说，语义化标签让代码结构更直白；对浏览器和搜索引擎来说，它们能更准确识别页面内容的主次关系。

播放器主体区是这样组织的：

section.video-player：外层容器，包含播放器和信息文本；
video.video-main：实际播放视频的 <video> 元素；
.video-meta：标题、分类标签、简介的容器；
.video-placeholder：未选择视频时显示的占位层。

这里有一个经验点：不要在设计之初就把大量 id 写在 HTML 上。id 在同一个页面里必须唯一，一旦列表是动态渲染的，用 id 处理重复项很容易出 bug。所以卡片上的按钮和区块更多的是用 class，只有视频播放器、搜索框、列表容器这类具名元素才给 id，方便 JavaScript 直接获取。

下面的片段是播放器最核心的 HTML 结构：

html复制<section class="player-layout">
  <div class="player-main">
    <div class="video-box">
      <video id="mainVideo" class="video-main" controls preload="none"></video>
      <div id="videoPlaceholder" class="video-placeholder">
        <span class="placeholder-icon">▶</span>
        <p>点击右侧卡片开始播放</p>
      </div>
    </div>
    <div class="video-meta">
      <h2 id="currentTitle">欢迎来到 HTML 视频演示站</h2>
      <div class="tag-row">
        <span id="currentCategory" class="category-tag">演示</span>
        <span id="currentDuration" class="duration-tag">00:00</span>
      </div>
      <p id="currentDescription">这是一个纯 HTML + CSS + JavaScript 实现的视频站页面。</p>
    </div>
  </div>
  <aside class="player-side">
    <h3>推荐视频</h3>
    <div id="videoList" class="video-list"></div>
  </aside>
</section>

<video> 的 controls 属性必须写，它决定浏览器是否显示播放/暂停/进度条/音量控制这些原生控件。preload="none" 表示页面加载时不预加载视频内容，只有用户点击播放后才开始加载，这样首屏渲染速度会快很多，也不会因为视频文件过大拖慢整个页面。页面上唯一的真实视频源由后续 JS 控制，所以 HTML 里 <video> 不写死 src，这是一种应对动态切换内容的标准做法。

占位层 .video-placeholder 覆盖在播放器上，初始状态是显眼的播放图标和引导语。点击卡片后，这个占位层隐藏，底层 <video> 元素接收新的视频源并播放。这个步骤是常见交互设计手法：给一个“空状态”引导，会比用户打开页面就面对一片黑屏好得多。

4. CSS 层怎么写：视频网站的深色视觉层次是怎么排出来的

看视频的页面我几乎总是用深色主题，不是跟风，而是有实际考量：视频内容本身是亮色画面时，深色背景能减少环境光对视觉的干扰，让观看者更专注于屏幕中央的播放画面。这个页面的视觉风格也按这个逻辑来搭。

4.1 全局变量和基础重置

CSS 变量在样式表里承担了“设计令牌”的职责。把常用颜色、圆角、阴影全部定义为变量，后续换主题色时只需要在 :root 里改一处，不用在几十条规则里逐个找颜色值。

css复制:root {
  --bg: #0f1115;
  --surface: #1a1d27;
  --surface-hover: #232838;
  --primary: #ff5f4b;
  --text: #e8eaf0;
  --text-sub: #a0a6b8;
  --border: #2b3040;
  --radius: 12px;
  --radius-sm: 8px;
}

基础重置选择 box-sizing: border-box，避免 padding 和 border 把布局撑破。很多新手出“为什么宽度超出屏幕”问题，十有八九是没做这个盒子模型设置。

4.2 主区域双栏布局

桌面端主内容区我用 CSS Grid 写布局，左栏播放器占 1fr，右栏推荐列表固定宽度 340px。1fr 是 Grid 的一种单位，代表把剩余空间全部分配给这一列，这样播放器能自适应不同屏幕尺寸。

css复制.player-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

小屏设备上，推荐列表不需要继续放在右侧，改成堆叠在播放器下方即可。我加了一条媒体查询，当视口宽度小于 900px 时把双栏改成单栏：

css复制@media (max-width: 900px) {
  .player-layout {
    grid-template-columns: 1fr;
  }
}

4.3 卡片网格的响应式排版

缩略图区域和卡片列表我使用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，含义是每列最小 200px，如果容器够宽就自动增加列数。这比写死三列四列更省心，因为当侧边栏收起或窗口宽度变化时，列数会自己跟着容器宽度走，不需要一堆媒体查询来强行适配。

视频封面卡片内部用了一个简单结构：封面层悬浮在卡片上方，封面底部左侧叠放时长标签。这个“时长标签叠在封面上”的视觉效果，靠的是让封面容器设置为 position: relative，时长标签设置为 position: absolute; bottom: 8px; right: 8px;。CSS 相对定位搭配绝对定位是最基础也最好用的叠放方案。

封面在没有真实图片的情况下，用线性渐变和文字内容生成占位，代码大概是这样：

css复制.thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}

aspect-ratio 是避免封面高度塌陷的关键，它强制缩略图区域始终按 16:9 比例展示。旧版浏览器不支持时可以用 padding-top: 56.25% 的传统 hack，但现代浏览器已经普遍支持 aspect-ratio，日常项目可以放心使用。

4.4 顶栏、按钮、搜索框的细节处理

顶部导航用 flex 横向排列，站点 logo 在左，搜索框在中间，分类导航在右。搜索框的边框在聚焦时从灰色变成主题色，这是用 input:focus { border-color: ... } 实现的。交互反馈不只是状态变化，它也是用户在页面上确认“我点到了哪里”的锚点。

分类按钮的“当前选中态”是用户体验里很重要的一个部分。我设置了一个 .tag-btn.active，通过 JavaScript 为当前选中的分类按钮添加这个类，按钮背景会变成主题色。视觉上高亮当前筛选条件，能避免用户忘记自己是在哪个分类里浏览。

5. 交互层：视频列表渲染、分类筛选、卡片点击联动播放器

既然数据是本地数组，页面的核心交互就是四个函数：renderVideos 渲染视频网格、handleFilter 处理分类/搜索词过滤、switchVideo 切换播放器内容、bindVideoEvents 绑定播放器底层事件。把它们拆开写，逻辑清晰，后面想加功能也容易插入。

5.1 用事件委托给动态卡片绑定点击

因为视频列表是 JavaScript 动态渲染的，直接给每个卡片元素绑定 click 监听在技术上可行，但推荐列表一旦重新渲染，旧的监听器可能残留或者丢失，处理起来很别扭。更干净的做法是在列表容器上绑定一次点击监听，然后通过事件对象的 closest 找到用户实际点击的卡片：

javascript复制videoList.addEventListener('click', function (e) {
  const card = e.target.closest('.video-card');
  if (!card) return;
  const id = Number(card.dataset.id);
  const target = allVideos.find(v => v.id === id);
  if (target) switchVideo(target);
});

e.target 是用户真正点击的那个元素，可能是一个文字节点或者 SVG 图标，closest('.video-card') 会向上查找最近的卡片祖先节点，找不到就返回 null。这种“事件委托”是在动态列表场景中必会的技巧，它能保证即使列表被重新渲染，点击行为依然生效。

5.2 渲染卡片列表，并给封面设置渐变占位

渲染函数把数组里每条视频数据拼接成 HTML 字符串，并插入列表容器。封面颜色用对象里的 color 字段写在行内 style 上，这样每条视频卡片的封面都有不同的渐变色，用来区分不同内容。

javascript复制function renderVideos(list) {
  const container = document.getElementById('videoGrid');
  container.innerHTML = list.map(video => `
    <article class="video-card" data-id="${video.id}">
      <div class="thumb" style="background: linear-gradient(135deg, ${video.color}, #1d2333);">
        <span class="thumb-title">${video.title}</span>
        <span class="thumb-duration">${video.duration}</span>
      </div>
      <div class="card-body">
        <h3>${video.title}</h3>
        <p>${video.category} · ${video.playCount} 次播放</p>
      </div>
    </article>
  `).join('');
  setEmptyTips();
}

注意这里用 innerHTML 拼接数据时，视频标题如果来自用户输入，需要做 HTML 转义，否则会留下 XSS 注入隐患。当前数据是本地固定数组，风险可控，但如果后续从接口获取数据，请务必做一次转义处理。

5.3 切换播放器的核心逻辑

switchVideo 要做的事罗列一下就是：从数组数据里取到新视频对象，更新 <video> 的 src，让播放器加载并播放，同时更新页面上的标题、分类标签、简介，隐藏占位层。

javascript复制function switchVideo(video) {
  currentVideo = video;
  const player = document.getElementById('mainVideo');
  const placeholder = document.getElementById('videoPlaceholder');
  player.src = video.file;

  document.getElementById('currentTitle').textContent = video.title;
  document.getElementById('currentCategory').textContent = video.category;
  document.getElementById('currentDuration').textContent = video.duration;
  document.getElementById('currentDescription').textContent = video.description;

  placeholder.style.display = 'none';
  player.load();
  const playPromise = player.play();
  if (playPromise !== undefined) {
    playPromise.catch(() => {
      // 自动播放可能被浏览器拦截，用户点击播放按钮即可继续
    });
  }
}

调用 player.play() 时会返回一个 Promise。如果浏览器的自动播放策略拦截了这次播放，Promise 会进入 rejected 状态，如果不加 catch，控制台会刷出未捕获的错误提示，影响排查其他问题。这段代码把失败情况显式捕获了，界面不会因此卡住。

5.4 分类和搜索过滤组合实现

分类筛选和搜索框输入本质上都是对原始视频数组做条件过滤。我在代码里把两个条件存放在同一组变量中：

javascript复制let currentFilter = '全部';
let currentKeyword = '';

过滤函数每次都读这两个状态，只要有一个不满足就过滤掉：

javascript复制function handleFilterChange() {
  const keyword = currentKeyword.trim().toLowerCase();
  const filtered = allVideos.filter(video => {
    const matchCategory = currentFilter === '全部' || video.category === currentFilter;
    const matchKeyword = !keyword || video.title.toLowerCase().includes(keyword);
    return matchCategory && matchKeyword;
  });
  renderVideos(filtered);
}

搜索框监听的是 input 事件，而不是 change 事件。input 事件在用户每敲一个字符就触发，过滤结果实时刷新；change 事件只在输入框失焦时才触发，体验会明显迟钝。如果搜索数据量很大，你可以用防抖优化，但这次视频列表只有不到十条数据，实时过滤性能没有问题。

6. 可直接运行的完整源码

把下面这段代码完整复制后，保存成 index.html，在浏览器里双击打开就能看到页面。代码中视频地址填写的是本地 videos/ 目录下的文件名，你可以在 videoData 数组里把 file 字段替换成你自己的视频地址；如果还没有准备好视频素材，也可以用网络公开视频地址测试。

为了方便你更快实现一个本地测试视频：可以用手机拍一段几秒钟的短片，传到电脑上放到 videos 文件夹中，并把 file 改为对应文件名（例如 videos/demo.mp4）。注意确保视频编码是网页兼容格式，否则播放器会显示加载失败。

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯 HTML 视频网站演示</title>
  <style>
    :root {
      --bg: #0f1115;
      --surface: #1a1d27;
      --surface-hover: #232838;
      --primary: #ff5f4b;
      --text: #e8eaf0;
      --text-sub: #a0a6b8;
      --border: #2b3040;
      --radius: 12px;
      --radius-sm: 8px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* 顶部导航 */
    .site-header {
      background: rgba(15, 17, 21, 0.9);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(8px);
    }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .logo {
      font-weight: 800;
      font-size: 1.4rem;
      color: var(--primary);
      white-space: nowrap;
    }

    .search-box {
      flex: 1;
      max-width: 420px;
      position: relative;
    }

    .search-box input {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      padding: 9px 14px;
      border-radius: 999px;
      outline: none;
      transition: border-color 0.2s;
    }

    .search-box input:focus {
      border-color: var(--primary);
    }

    .filter-nav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tag-btn {
      border: none;
      background: transparent;
      color: var(--text-sub);
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .tag-btn:hover {
      background: var(--surface-hover);
      color: var(--text);
    }

    .tag-btn.active {
      background: var(--primary);
      color: #fff;
    }

    /* 主内容布局 */
    .player-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 20px;
    }

    .video-box {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .video-main {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: radial-gradient(circle at 30% 30%, #262b3a, #0b0d12);
      cursor: pointer;
      color: var(--text-sub);
    }

    .placeholder-icon {
      font-size: 3.2rem;
      color: #fff;
      background: rgba(255, 255, 255, 0.12);
      width: 88px;
      height: 88px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .video-meta {
      padding: 18px 0 0;
    }

    .video-meta h2 {
      font-size: 1.5rem;
      margin-bottom: 6px;
    }

    .tag-row {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }

    .category-tag,
    .duration-tag {
      font-size: 0.8rem;
      padding: 3px 10px;
      border-radius: 999px;
      color: var(--text);
    }

    .category-tag {
      background: var(--surface-hover);
    }

    .duration-tag {
      background: rgba(255, 95, 75, 0.15);
      color: var(--primary);
    }

    .video-meta p {
      color: var(--text-sub);
    }

    /* 推荐侧栏 */
    .player-side {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      background: var(--surface);
      height: fit-content;
    }

    .player-side h3 {
      font-size: 1.1rem;
      margin-bottom: 12px;
    }

    .side-card {
      display: flex;
      gap: 10px;
      padding: 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.2s;
    }

    .side-card:hover {
      background: var(--surface-hover);
    }

    .side-thumb {
      width: 140px;
      height: 78px;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      overflow: hidden;
    }

    .side-title {
      font-size: 0.95rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .side-meta {
      font-size: 0.8rem;
      color: var(--text-sub);
      margin-top: 4px;
    }

    /* 推荐区网格 */
    .section-title {
      max-width: 1200px;
      margin: 24px auto 0;
      padding: 0 20px;
      font-size: 1.2rem;
    }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .video-card {
      background: var(--surface);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      border: 1px solid transparent;
    }

    .video-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      border-color: var(--border);
    }

    .thumb {
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
    }

    .thumb-title {
      position: absolute;
      left: 10px;
      bottom: 26px;
      font-size: 1.1rem;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      max-width: 80%;
    }

    .thumb-duration {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .card-body {
      padding: 12px;
    }

    .card-body h3 {
      font-size: 0.95rem;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-body p {
      font-size: 0.8rem;
      color: var(--text-sub);
    }

    .empty-tips {
      text-align: center;
      color: var(--text-sub);
      padding: 40px 0;
    }

    /* 页脚 */
    .site-footer {
      border-top: 1px solid var(--border);
      text-align: center;
      padding: 20px;
      color: var(--text-sub);
      font-size: 0.9rem;
      margin-top: 20px;
    }

    @media (max-width: 900px) {
      .player-layout {
        grid-template-columns: 1fr;
      }

      .nav-inner {
        flex-wrap: wrap;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="nav-inner">
      <a href="#" class="logo">HTML 视频站</a>
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="搜索视频标题...">
      </div>
      <nav class="filter-nav" id="filterNav"></nav>
    </div>
  </header>

  <main>
    <section class="player-layout">
      <div class="player-main">
        <div class="video-box">
          <video id="mainVideo" class="video-main" controls preload="none"></video>
          <div id="videoPlaceholder" class="video-placeholder">
            <span class="placeholder-icon">▶</span>
            <p>点击下方视频卡片开始播放</p>
          </div>
        </div>
        <div class="video-meta">
          <h2 id="currentTitle">欢迎来到 HTML 视频演示站</h2>
          <div class="tag-row">
            <span id="currentCategory" class="category-tag">演示</span>
            <span id="currentDuration" class="duration-tag">00:00</span>
          </div>
          <p id="currentDescription">点击推荐视频，播放器会切换到对应内容。</p>
        </div>
      </div>

      <aside class="player-side">
        <h3>正在推荐</h3>
        <div id="sideList"></div>
      </aside>
    </section>

    <h2 class="section-title">精选视频</h2>
    <div id="videoGrid" class="video-grid"></div>
  </main>

  <footer class="site-footer">
    <p>纯 HTML 视频网站演示页面</p>
  </footer>

  <script>
    // 视频数据：项目没有服务端，数据集中在数组维护
    // file 字段请改成你本地可访问的视频地址
    const allVideos = [
      {
        id: 1,
        title: '城市夜景延时摄影',
        category: '摄影',
        duration: '03:12',
        color: '#3a7bd5',
        file: 'videos/city.mp4',
        description: '一段用延时摄影记录城市夜晚灯光流动的视频素材。'
      },
      {
        id: 2,
        title: '三分钟学会番茄炒蛋',
        category: '美食',
        duration: '02:45',
        color: '#f7971e',
        file: 'videos/cook.mp4',
        description: '厨房新手也能轻松上手的一道家常菜教程。'
      },
      {
        id: 3,
        title: '极简主义桌面布置',
        category: '生活',
        duration: '05:20',
        color: '#3bb78f',
        file: 'videos/desk.mp4',
        description: '把桌面恢复整洁，提升每天工作时的专注感。'
      },
      {
        id: 4,
        title: 'JavaScript 数组方法合集',
        category: '教程',
        duration: '12:08',
        color: '#f953c6',
        file: 'videos/js.mp4',
        description: 'map、filter、reduce 的真实项目用法梳理。'
      },
      {
        id: 5,
        title: '户外徒步装备清单',
        category: '户外',
        duration: '08:16',
        color: '#56ab2f',
        file: 'videos/hiking.mp4',
        description: '出门徒步前需要准备哪些基础装备，一次讲清楚。'
      },
      {
        id: 6,
        title: '周末手工木作小凳',
        category: '手工',
        duration: '10:05',
        color: '#a166ab',
        file: 'videos/wood.mp4',
        description: '从切割木板到拼接成型，制作一把小凳子全流程。'
      }
    ];

    const categories = ['全部', ...new Set(allVideos.map(v => v.category))];
    let currentFilter = '全部';
    let currentKeyword = '';
    let currentVideo = null;

    const mainVideo = document.getElementById('mainVideo');
    const videoGrid = document.getElementById('videoGrid');
    const sideList = document.getElementById('sideList');
    const filterNav = document.getElementById('filterNav');
    const placeholder = document.getElementById('videoPlaceholder');
    const searchInput = document.getElementById('searchInput');

    // 初始化分类按钮
    categories.forEach(category => {
      const btn = document.createElement('button');
      btn.className = 'tag-btn' + (category === '全部' ? ' active' : '');
      btn.textContent = category;
      btn.addEventListener('click', function () {
        currentFilter = category;
        filterNav.querySelectorAll('.tag-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        renderAll();
      });
      filterNav.appendChild(btn);
    });

    // 渲染首页网格 + 侧边推荐
    function renderAll() {
      const list = getFilteredVideos();
      renderVideos(list);
      renderSideList(list);
    }

    function getFilteredVideos() {
      const keyword = currentKeyword.trim().toLowerCase();
      return allVideos.filter(video => {
        const matchCategory = currentFilter === '全部' || video.category === currentFilter;
        const matchKeyword = !keyword || video.title.toLowerCase().includes(keyword);
        return matchCategory && matchKeyword;
      });
    }

    function renderVideos(list) {
      if (list.length === 0) {
        videoGrid.innerHTML = '<p class="empty-tips">没有找到符合条件的视频，换个关键词试试吧。</p>';
        return;
      }
      videoGrid.innerHTML = list.map(video => `
        <article class="video-card" data-id="${video.id}">
          <div class="thumb" style="background: linear-gradient(135deg, ${video.color}, #1d2333);">
            <span class="thumb-title">${video.title}</span>
            <span class="thumb-duration">${video.duration}</span>
          </div>
          <div class="card-body">
            <h3>${video.title}</h3>
            <p>${video.category}</p>
          </div>
        </article>
      `).join('');
    }

    function renderSideList(list) {
      if (list.length === 0) {
        sideList.innerHTML = '<p class="empty-tips">暂无推荐</p>';
        return;
      }
      sideList.innerHTML = list.slice(0, 4).map(video => `
        <div class="side-card" data-id="${video.id}">
          <div class="side-thumb" style="background: linear-gradient(135deg, ${video.color}, #1d2333);">
            ${video.title}
          </div>
          <div>
            <div class="side-title">${video.title}</div>
            <div class="side-meta">${video.category} · ${video.duration}</div>
          </div>
        </div>
      `).join('');
    }

    // 点击卡片切换到播放器
    function initClickListeners() {
      document.addEventListener('click', function (e) {
        const card = e.target.closest('.video-card, .side-card');
        if (!card) return;
        const id = Number(card.dataset.id);
        const targetVideo = allVideos.find(v => v.id === id);
        if (targetVideo) switchVideo(targetVideo);
      });

      // 点击占位层，如果当前没有选中视频，自动播第一个
      placeholder.addEventListener('click', function () {
        if (!currentVideo && allVideos.length > 0) {
          switchVideo(allVideos[0]);
        }
      });
    }

    function switchVideo(video) {
      currentVideo = video;
      placeholder.style.display = 'none';
      mainVideo.src = video.file;
      mainVideo.load();
      mainVideo.play().catch(function () {
        // 浏览器自动播放策略可能拦截，用户可在播放器上手动点击播放
      });

      document.getElementById('currentTitle').textContent = video.title;
      document.getElementById('currentCategory').textContent = video.category;
      document.getElementById('currentDuration').textContent = video.duration;
      document.getElementById('currentDescription').textContent = video.description;

      // 高亮正在播放的侧边卡片
      sideList.querySelectorAll('.side-card').forEach(el => {
        el.style.background = '';
      });
      const activeSide = sideList.querySelector(`.side-card[data-id="${video.id}"]`);
      if (activeSide) activeSide.style.background = 'var(--surface-hover)';
    }

    // 搜索输入
    searchInput.addEventListener('input', function () {
      currentKeyword = this.value;
      renderAll();
    });

    // 页面启动后默认显示全部
    renderAll();
    initClickListeners();
  </script>
</body>
</html>

7. 我在调试这个页面时踩过的几个实际教训

页面写完不代表能顺利交付，我自己在这个项目里做本地验证时翻过几次车，这里记录一下，希望你能绕开这些坑。

7.1 视频文件格式带来的“奇怪播放失败”

出现“卡片点了没反应，控制台报 MEDIA_ERR_SRC_NOT_SUPPORTED”时，第一反应往往是怀疑路径写错，但检查后发现路径没有问题。这种情况大概率是视频编码问题。手机录制的视频大多能正常播放，但如果你的素材是从专业剪辑软件导出的 H.265/HEVC 编码 MP4，Chrome 和 Firefox 不一定支持。翻看代码是查不出原因的，必须用 FFmpeg 或格式转换工具把素材转成 H.264 编码。

一个辅助判断标准是：把视频文件单独拖进一个浏览器标签页，如果浏览器直接全屏播放了这个视频，说明它的格式基本兼容；如果浏览器显示一片空白或直接下载文件，就不要纠结前端代码了，先去转编码。

7.2 双击打开的 file 协议和线上环境存在差异

这种单文件页面在本地双击打开时走的是 file:// 协议，在绝大多数场景下，<video> 仍然能正常播放本地视频，但在一些严格策略的浏览器环境或安全软件限制下，本地媒体文件的读取可能被拦。另外，如果后续你用 fetch('/api/videos') 拉取数据，本地 file:// 方式打开会被浏览器的跨域策略拦截。

所以演示时如果发现本地打开正常、放到服务器后却有问题，不一定是代码写错了，先看浏览器开发者工具里网络请求的状态码。用本地文件测试时最省心的方式是直接在项目目录跑一个静态服务，例如用 VS Code 的 Live Server 插件，或者安装 Node 后执行类似 npx serve 的命令。

7.3 视频元数据在封面显示上的坑

基于标题的说法，很多人会误以为播放器就绪后浏览器会自动展示视频第一帧作为封面。实际上 <video> 没有设置 src，页面初始会显示一片黑底，非常影响第一眼观感。所以我加了占位层。另一种做法是设置 <video> 的 poster 属性，但 poster 需要一个图片文件，会增加素材依赖，与这个单文件项目的定位不符。最终选择用 CSS 渐变占位封面，既不需要额外图片，也让页面在没有真实素材的情况下仍然能看出视频卡片分布效果。

推荐列表里我也放了类似的缩略块，由于是动态渲染，我直接在样式中使用渐变色作为封面的底色，这样可以保证页面在断网、无图片素材的情况下依然有完整的视觉结构。

7.4 自动播放策略：不是所有浏览器都听你的

我写的 switchVideo 一开始没有为 player.play() 加 catch，在 Chrome 下点击卡片后能正常播放，但在 Safari 下控制台会跳一个 NotAllowedError，原因是 Safari 对自动播放的限制比 Chrome 更严格。浏览器要求“有声音的视频必须由用户手势触发之后才允许播放”，点击卡片本身算一次用户手势，但同一时间既要在页面上更新文本，又要触发音频播放，不同浏览器的表现并不一致。

处理方式已经写进源码里，核心思路是两点：调用 play() 后要处理 Promise 的失败情况；在 UI 上给用户留出点击播放器原生播放按钮的路径。不要拦截原生控制能力，给浏览器保留标准交互方式。

到这里，这个页面已经能完成视频展示、内容联动和筛选搜索的全部核心功能。你可以把代码里 videoData 的每个字段替换成自己的真实项目和视频素材，也可以用这套结构继续延伸，比如把“分类筛选”改成“热门排序”，或者把“点击侧边卡片切换视频”改成“自动播放下一条”——每一次改动都会让你更理解前端页面里数据与界面之间的流动过程，这比套用框架写出一大堆自动生成的代码要有价值得多。

纯HTML实现视频网站页面：单文件播放器与分类筛选