播放列表编辑器：批量管理视频、字幕与章节

三集短片手写 JSON 没问题；三十集课程、每集挂双语字幕、章节、缩略图呢？「播放列表」本质是一份结构化数据，数据量大到一定程度就必须上工具。ZWPlayer 播放列表编辑器把这件事可视化：批量导入、拖拽排序、逐条配置附属资源，导出标准 ZWMAP playlist JSON。

界面总览：三区协作

编辑器分三区：左侧分组与条目列表（分组可折叠、条目可搜索）、右侧详情面板（当前条目的全部属性）、顶部工具栏（导入导出、批量操作、撤销重做、预览）。

编辑器总览 图 1:编辑器总览——左侧两分组五条目,右侧详情面板

第一步：把内容批量弄进来

三种导入姿势按场景选：

  • JSON 导入：已有 ZWMAP 播放列表（或 ZWScan 扫描产物），「导入 → 文件」直接进；
  • 文本批量导入：一行一个 URL（或「名称,URL」）粘贴进来，几十条目一次建好——课程上线前的标准动作；
  • 逐条添加：「添加条目」按钮，适合补漏。

导入后条目按分组归位，搜索框可按名称快速过滤。

第二步：逐条挂资源——详情面板

选中任一条目，右侧详情面板展开它的全部可配置项：名称、URL、类型（自动识别）、海报图（带缩略图预览）、字幕轨（多行，逐轨填 URL）、配音音轨、歌词（LRC）、章节、多码率源、是否直播。

条目详情面板 图 2:选中「第 1 课」后右侧出现它的编辑面板——海报缩略图、双语字幕轨逐行配置

这里挂好的资源会随条目切换自动挂载——观众从第 1 课点到第 2 课，字幕、章节、海报全部跟过去，不需要每集重复配置播放器。

第三步：列表级设置

工具栏的「播放列表设置」配置整体行为：标题（列表面板顶部的节目名）、ID、自动连播开关（一集播完自动下一集）。

播放列表设置 图 3:列表级设置——标题、ID 与自动连播

导入导出与草稿

右侧 JSON 面板实时显示当前列表的 ZWMAP 结构，可直接编辑后应用（改完点「应用」即刻生效）、复制或导出文件；草稿自动保存在浏览器里，关页面不丢。

JSON 面板 图 4:JSON 面板——所见即协议,可编辑、复制、导出

预览与播放器端效果

点「预览」进入真实 ZWPlayer 全屏预览：列表面板（快捷键 Q）展示分组与条目，点选即切、自动连播、条目资源（字幕/章节/海报）随切换挂载——观众端看到的就是这个样子。

预览播放器 图 5:预览——播放器列表面板与播放中的条目

接入自己的页面同样一行：

new ZWPlayer({
  playerElm: 'player',
  playlist: '/lists/course.json',   // 编辑器导出的 ZWMAP playlist JSON
});

播放器侧得到的是完整列表体验：下一集按钮、列表面板、连播、记忆播放位置。

与 ZWScan 的组合拳

本地媒体库（NAS、教学素材库、录像归档）推荐流水线：

  1. ZWScan 扫描目录，自动识别视频与同名字幕/章节文件，生成初版列表；
  2. 导入播放列表编辑器，人工补海报、调分组、挂多码率；
  3. 导出 JSON 交给 ZWServe 或你的 CDN。

「几百个文件的媒体库 → 一个能直接看的网站」，全程不超过一杯咖啡的时间。

典型场景

  • 课程站：每课一节，字幕章节齐备，学一半自动记住位置；
  • 企业内训：按部门分组，片头挂水印防外传；
  • 点播站：多码率条目 + HLS 源，列表页即成品。

常见问题

导入后条目顺序乱了？ 拖拽排序随时调；分组内顺序即播放顺序。

海报不显示？ 检查海报 URL 可达性与跨域（CORS）；编辑器内缩略图预览就是第一道校验。

能直接改 JSON 吗？ 能——JSON 面板就是协议本身，改完「应用」即可；大改动建议在文件里做好版本管理再导入。

相关文章