视频播放列表编辑器 — 使用指南

快速入门

播放列表编辑器是一款免费的在线工具，用于创建和管理视频播放列表。您可以将多个视频组织为分组，配置每个视频的元数据（海报、字幕、章节、标注、缩略图），然后导出 ZWMAP JSON 文件供 ZWPlayer 使用。

快速上手步骤

1. 创建分组

   点击工具栏中的"＋ 新建分组"按钮（或按 G 键）创建第一个分组。分组用于按主题或系列组织视频条目。

2. 添加视频条目

   选择一个分组后，点击"添加条目"按钮（或按 N 键），或使用批量导入功能。支持三种方式：粘贴 URL、拖拽本地文件、导入 JSON/XML。

3. 配置元数据

   为每个视频条目设置海报图片、多语言字幕轨、章节导航、标注交互、缩略图和 EPG 节目信息。URL 字段为必填项，类型自动检测。

4. 导出 ZWMAP JSON

   配置完成后，点击"导出"按钮（或按 Ctrl+S）下载播放列表 JSON 文件。该文件可直接用于 ZWPlayer 播放器配置。

键盘快捷键

使用以下键盘快捷键提高工作效率：

分组与条目管理

分组管理

分组用于按主题、系列或分类组织视频条目。每个分组包含以下属性：

条目详情字段

每个视频条目支持以下配置字段：

导入方式

播放列表编辑器支持多种导入方式，方便您快速填充播放列表内容：

URL 导入

粘贴视频 URL 列表，每行一个。支持 "URL 名称" 格式来指定视频名称。以 # 开头的行为注释会被忽略。适合快速导入已有的线上视频资源。

# Comment lines start with #
https://cdn.example.com/video1.mp4 Episode 1
https://cdn.example.com/video2.mp4 Episode 2
https://cdn.example.com/video3.mp4

文件导入

将本地文件拖拽到编辑器窗口中。支持视频文件及同名辅助文件。系统会自动分类并根据文件基本名关联。

文件类型识别规则

系统采用三阶段检测策略：1) ZWMAP 协议头（zwp_type），2) 文件名后缀关键词，3) 内容结构分析。

JSON 导入

导入 ZWMAP 播放列表 JSON 文件。工具会解析分组和条目，合并到当前编辑列表中。适合从已有配置文件恢复或迁移数据。

XML 导入

导入兼容格式的 XML 播放列表文件。工具会自动转换 XML 结构为 ZWMAP 格式。

批量操作与模板

选中多个条目后，可以使用批量操作同时修改它们的属性。路径模板支持变量替换：

模板变量

批量操作类型

ZWMAP 播放列表规范

ZWMAP（ZWPlayer 媒体应用协议）播放列表类型定义了描述视频播放列表的标准 JSON 格式。该协议实现了播放列表编辑工具与视频播放器之间的互操作性。

协议头部

每个 ZWMAP 播放列表文档以协议标识符开头：

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "playlist",
  "zwp_version": "1.0"
}

数据结构

播放列表由分组（groups）数组组成，每个分组包含条目（items）数组：

条目字段

完整示例

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "playlist",
  "zwp_version": "1.0",
  "groups": [
    {
      "name": "Course Series",
      "id": "group-1",
      "items": [
        {
          "name": "Episode 1",
          "id": "item-1",
          "url": "https://cdn.example.com/video1.mp4",
          "poster": "https://cdn.example.com/poster1.jpg",
          "subtitle": [
            { "url": "https://cdn.example.com/sub1-en.vtt", "label": "English", "lang": "en" },
            { "url": "https://cdn.example.com/sub1-zh.vtt", "label": "中文", "lang": "zh" }
          ],
          "chapter": "https://cdn.example.com/chapter1.json",
          "annotation": "https://cdn.example.com/annotation1.json",
          "thumbnail": "https://cdn.example.com/thumb1.json",
          "watermark": "https://cdn.example.com/watermark1.json"
        },
        {
          "name": "Episode 2",
          "id": "item-2",
          "url": "https://cdn.example.com/video2.mp4"
        }
      ]
    },
    {
      "name": "Live Channels",
      "id": "group-2",
      "items": [
        {
          "name": "News Live",
          "url": "https://live.example.com/news.m3u8",
          "type": "hls",
          "isLive": true,
          "epg": "News Broadcast"
        }
      ]
    }
  ]
}

此示例展示了一个包含两个分组的播放列表，每个分组包含两个视频条目，涵盖了常见的元数据配置。

ZWPlayer 集成

ZWPlayer 是一个功能丰富的 JavaScript 视频播放器，原生支持播放列表功能。以下是如何将生成的播放列表与 ZWPlayer 集成。

播放器配置

在 ZWPlayer 初始化配置中添加 playlist 属性：

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video1.mp4',
  playlist: {
    groups: [
      {
        name: 'Course Series',
        items: [
          { name: 'Episode 1', url: 'https://cdn.example.com/video1.mp4' },
          { name: 'Episode 2', url: 'https://cdn.example.com/video2.mp4' }
        ]
      }
    ]
  }
});

配置网络前缀

在播放列表编辑器的工具栏中设置网络前缀（Base URL），导出时会自动拼接到本地文件名之前。如果视频已经使用完整 URL，则无需设置。

使用 JSON URL

将导出的 ZWMAP JSON 文件上传到 Web 服务器后，可以直接将 URL 传入 playlist 属性：

var player = new ZWPlayer({
  playerElm: 'mse',
  url: 'https://cdn.example.com/video1.mp4',
  playlist: 'https://cdn.example.com/playlist/playlist-zwmap.json'
});

常见问题