ZWPlayer 播放列表功能使用说明
1. 功能概述
ZWPlayer 内置播放列表功能,支持多视频有序播放。用户可以通过 ZWMAP 播放列表协议加载在线列表,也可以直接拖拽本地文件自动生成列表。播放列表面板提供搜索、收藏、历史记录等管理能力,适用于系列课程、剧集播放、培训视频等连续观看场景。
2. 加载播放列表
2.1 通过 ZWMAP 协议加载
播放列表采用 ZWMAP 协议格式(zwp_type: "playlist"),支持一级或多级分组结构。通过 url 参数传入播放列表 JSON 地址即可加载:
new ZWPlayer({
playerElm: 'mse',
url: 'https://example.com/playlist.json'
});
播放器会自动识别 JSON 中的 ZWMAP 协议头并按播放列表模式加载。
一级菜单(单分组): 当播放列表只有一个分组时,面板自动切换为单栏模式,直接显示所有视频项。
两级菜单(多分组): 当播放列表包含多个分组时,面板显示为左右双栏——左侧为分组列表,右侧为当前分组下的视频项。点击左侧分组即可切换。
2.2 通过本地文件拖拽
开启 localPlayback 后,用户可以直接将视频文件拖拽到播放器区域:
- 拖入多个视频文件: 自动创建本地播放列表,按文件名排序
- 拖入单个视频文件: 追加到已有列表,或创建新列表
- 拖入播放列表文件: 支持
.json格式,直接替换当前列表 - 自动关联附属文件: 与视频同名字幕(
.srt/.vtt/.bcc)、章节(.json)、标注等文件会自动匹配加载
2.3 自动播放与连播逻辑
当播放器设置 autoplay: true 时:
- 加载在线播放列表后,自动播放第一个视频
- 拖拽本地文件后,如果当前没有正在播放的内容,自动开始播放
- 当前视频播放结束后,自动播放列表中的下一个视频
播放器提供四种播放模式,通过播放列表面板标题栏的播放模式按钮切换:
- 连播(默认):当前视频播完后自动播放下一个,列表播完即停
- 列表循环:当前视频播完后自动播放下一个,最后一项播完自动回到第一项
- 单曲循环:当前视频反复播放,不切换到下一个
- 播放一次:当前视频播完后停止,不自动播放下一个
此外,播放器控制条上的 循环开关 等效于"单曲循环"模式——开启时当前视频反复播放,不切换下一个。
3. 播放列表面板功能
3.1 列表搜索
面板顶部提供搜索框,输入关键词即可实时搜索:
- 搜索范围覆盖所有分组中的视频名称
- 搜索时自动切换为单栏模式,跨分组显示匹配结果
- 匹配文字高亮显示
- 清除搜索关键词恢复原始分组视图
3.2 收藏功能
- 点击视频项右侧的星形图标即可收藏/取消收藏
- 点击面板标题栏的收藏按钮,可筛选显示所有已收藏的视频
- 收藏数据保存在浏览器本地,刷新页面后仍然保留
3.3 历史记录
- 点击面板标题栏的时钟按钮,查看最近播放过的视频
- 最多保留 100 条历史记录,按播放时间倒序排列
- 可一键清除全部历史记录
3.4 其他操作
- 刷新列表: 在线播放列表支持刷新重新加载(远程列表显示刷新按钮)
- 清空列表: 本地文件创建的播放列表支持一键清空(本地列表显示清空按钮)
- 删除单项: 本地列表中每个视频项右侧有删除按钮,可逐个移除
- 播放进度: 每个视频项上显示进度条,已播放完成的项显示完成标记
- 断点续播: 关闭页面后再次打开同一视频,自动从上次观看位置继续播放
4. 控制栏导航
加载播放列表后,播放器控制栏会自动出现上/下一个按钮:
- 点击 下一个 按钮:播放列表中的下一个视频
- 点击 上一个 按钮:播放列表中的上一个视频
- 在收藏模式下,上/下按钮仅在收藏的视频之间切换
5. 快捷键
| 快捷键 | 功能 |
|---|---|
Q |
打开/关闭播放列表面板 |
ESC |
关闭播放列表面板(在搜索框聚焦时生效) |
[ 或 【 |
播放上一个视频 |
] 或 】 |
播放下一个视频 |
Enter 或 Space |
在分组列表中选中当前分组 |
6. 相关配置
| 参数 | 位置 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
autoplay |
播放器初始化参数 | boolean | true |
是否自动播放 |
localPlayback |
播放器初始化参数 | boolean | false |
是否启用本地文件拖拽功能 |
关于播放列表 JSON 的完整字段定义,请参考 ZWMAP 播放列表规范。