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. 功能与应用场景
截取片段循环播放
通过片段选择功能,可以截取视频中的任意片段进行循环播放:
- 点击控制栏上的 片段选择按钮 激活片段模式
- 在进度条上拖动起始和终止手柄,选定目标片段
- 切换为"单曲循环"模式,即可反复播放选定片段
此功能非常适合:
- 音乐练习:截取乐曲中需要反复练习的段落
- 语言学习:截取对话片段反复听读
- 动作分析:截取运动视频中的关键动作慢放学习
提示:如果视频已加载章节,可以直接点击章节列表中的循环按钮,自动设置该章节为循环片段。
构建本地播放列表
拖入多个视频文件后,播放器自动创建本地播放列表,功能与在线播放列表完全一致:
- 搜索、收藏、历史记录等管理功能
- 四种播放模式(连播、列表循环、单曲循环、播放一次)
- 控制栏上/下一个按钮快速切换
- 快捷键
Q、[、]操作
详细功能说明请参阅 播放列表功能使用说明。
教学场景下的深度应用
本地播放功能在教学场景下应用最为广泛,典型工作流程如下:
- 教师准备素材:为每个教学视频配备章节(标记知识点位置)、字幕(辅助听障学员)、交互标注(随堂测验)
- 课堂演示:将所有文件拖拽到播放器中,一键加载完整的增强视频
- 知识点定位:通过章节标记快速跳转到特定知识点
- 互动教学:播放到标注时间点时自动暂停,弹出测验题,学生现场作答
- 片段回放:对重点或难点片段使用片段循环反复讲解
4. 启用本地播放
配置方式
通过 localPlayback 参数启用本地播放功能:
new ZWPlayer({
playerElm: '#player-holder',
localPlayback: true // 启用本地播放
});
界面变化
启用后播放器界面会发生变化:
- 控制栏:出现文件夹图标按钮,点击可打开文件选择器
- 播放区域:无视频时显示"点击或拖拽文件到此处播放"的提示区域
- 拖拽区域:整个播放器区域均可接受文件拖拽
快速体验
也可以直接访问 在线播放器,该页面已内置本地播放功能,打开即可使用,无需额外配置。