ZWPlayer 本地播放使用说明

ZWPlayer 支持直接播放本地视音频文件,无需上传到服务器。所有文件在浏览器中本地处理,保障数据隐私。本地播放是 ZWPlayer 的一项重要特性,特别适合教育培训、内容审核、离线演示等场景。

1. 支持的媒体格式

视频格式

格式 扩展名 说明
MP4 .mp4.m4v 最通用的视频格式,所有浏览器均支持
WebM .webm 开源格式,Chrome、Firefox、Edge 原生支持
OGG .ogg.ogv 开源格式,Chrome、Firefox、Opera 原生支持
MOV .mov QuickTime 格式,现代浏览器可支持
MKV .mkv Matroska 容器,浏览器支持取决于内部编码

音频格式

格式 扩展名 说明
MP3 .mp3 最通用的音频格式
WAV .wav 无损音频格式
FLAC .flac 无损压缩音频格式
M4A .m4a AAC 音频格式
Opus .opus 高效音频编码格式

提示:浏览器对格式的支持取决于内置解码器。MP4(H.264)和 WebM(VP8/VP9)兼容性最好,推荐优先使用。

2. 文件添加方式

启用本地播放后,用户可以通过以下两种方式添加文件:

方式一:拖拽添加

将文件直接从文件管理器拖拽到播放器窗口中:

  • 拖入单个视频:直接开始播放该视频
  • 拖入多个视频:自动创建本地播放列表,按文件名排序
  • 拖入视频 + 附属文件:字幕、章节、标注等辅助文件按文件名自动关联

拖拽时播放器会显示蓝色虚线边框和"拖拽视音频文件到此处播放"提示,释放文件即可加载。

支持的附属文件类型:

资源类型 文件后缀 匹配规则 功能说明
字幕 .srt.vtt.webvtt.bcc.json 视频名_subtitle 或同名 为视频添加多语言字幕
章节 .json.vtt.webvtt 视频名_chapter 或同名 在进度条上显示章节标记
缩略图预览 .json 视频名_thumbnail 或同名 鼠标悬停进度条时显示预览画面
交互标注 .json 视频名_annotation 或同名 叠加可交互的热区、按钮、测验等标注
水印 .json 视频名_watermark视频名_wm 叠加品牌 Logo 或防录屏动态水印

文件命名规则: 辅助资源文件的名称以视频文件名为基础,加上对应的功能后缀。分隔符支持 _-. 三种形式。

例如视频文件为 lesson1.mp4,则以下文件会自动关联:

lesson1.mp4                          ← 视频文件
lesson1_chapter.json                 ← 章节数据
lesson1_subtitle.srt                 ← 字幕文件
lesson1_thumbnail.json               ← 进度条缩略图
lesson1_annotation.json              ← 交互标注
lesson1_watermark.json               ← 水印配置

方式二:点击按钮选择

点击播放器控制栏上的 本地播放按钮(文件夹图标),打开系统文件选择对话框:

  • 支持 多文件同时选择(按住 Ctrl/Command 键多选)
  • 文件选择器自动筛选支持的格式类型
  • 可同时选择视频、音频、字幕、章节等多种类型的文件

3. 功能与应用场景

截取片段循环播放

通过片段选择功能,可以截取视频中的任意片段进行循环播放:

  1. 点击控制栏上的 片段选择按钮 激活片段模式
  2. 在进度条上拖动起始和终止手柄,选定目标片段
  3. 切换为"单曲循环"模式,即可反复播放选定片段

此功能非常适合:

  • 音乐练习:截取乐曲中需要反复练习的段落
  • 语言学习:截取对话片段反复听读
  • 动作分析:截取运动视频中的关键动作慢放学习

提示:如果视频已加载章节,可以直接点击章节列表中的循环按钮,自动设置该章节为循环片段。

构建本地播放列表

拖入多个视频文件后,播放器自动创建本地播放列表,功能与在线播放列表完全一致:

  • 搜索、收藏、历史记录等管理功能
  • 四种播放模式(连播、列表循环、单曲循环、播放一次)
  • 控制栏上/下一个按钮快速切换
  • 快捷键 Q[] 操作

详细功能说明请参阅 播放列表功能使用说明

教学场景下的深度应用

本地播放功能在教学场景下应用最为广泛,典型工作流程如下:

  1. 教师准备素材:为每个教学视频配备章节(标记知识点位置)、字幕(辅助听障学员)、交互标注(随堂测验)
  2. 课堂演示:将所有文件拖拽到播放器中,一键加载完整的增强视频
  3. 知识点定位:通过章节标记快速跳转到特定知识点
  4. 互动教学:播放到标注时间点时自动暂停,弹出测验题,学生现场作答
  5. 片段回放:对重点或难点片段使用片段循环反复讲解

4. 启用本地播放

配置方式

通过 localPlayback 参数启用本地播放功能:

new ZWPlayer({
    playerElm: '#player-holder',
    localPlayback: true   // 启用本地播放
});

界面变化

启用后播放器界面会发生变化:

  • 控制栏:出现文件夹图标按钮,点击可打开文件选择器
  • 播放区域:无视频时显示"点击或拖拽文件到此处播放"的提示区域
  • 拖拽区域:整个播放器区域均可接受文件拖拽

快速体验

也可以直接访问 在线播放器,该页面已内置本地播放功能,打开即可使用,无需额外配置。