ZWPlayer 在线代码生成器 — 用户指南
通过可视化界面配置视频播放器，实时预览效果并一键生成可嵌入的 HTML/JavaScript 代码。支持 MP4、FLV、HLS、DASH、WebRTC、字幕、章节、弹幕等功能。
快速上手
ZWPlayer 在线代码生成器是一款免费工具，让您通过可视化界面配置视频播放器，即时生成可直接使用的 HTML/JavaScript 代码。无需手动编码——只需配置、预览、复制。
快速开始
-
输入视频地址
在视频地址栏粘贴视频 URL（支持 MP4、FLV、HLS、DASH、WebRTC）。预览将自动加载。
-
配置播放器
使用左侧面板的标签页调整基本设置、功能开关、播放控制和高级选项。修改会实时反映到预览中。
-
预览效果
右侧面板显示配置后播放器的实时预览。点击"运行预览"按钮强制刷新，或直接调整设置观察变化。
-
复制代码
切换到"代码生成"选项卡，点击"复制代码"按钮。将 HTML 代码片段粘贴到您的 Web 项目中即可运行。
基本设置
视频播放器的核心参数配置。
| 参数 | 说明 |
|---|---|
| 是否直播 | 启用直播流模式。播放器将切换为实时播放行为。 |
| 视频地址 | 媒体资源 URL。支持 MP4、FLV、HLS (m3u8)、DASH (mpd) 和 WebRTC 流。也可以传入播放列表 JSON 数组，点击"播放列表工具"链接可在线生成。 |
| 媒体网关地址 | 媒体网关服务 URL，用于高级流媒体配置。 |
| 语言 | 播放器界面语言。可选英文或中文。 |
| 流式布局 | 启用响应式布局。播放器将根据宽度自动按 16:9 比例调整高度。 |
| 宽度 / 高度 | 设置播放器尺寸。支持像素值（如 640）或百分比（如 100%）。不写单位时默认为 px。流式布局模式下高度自动计算。 |
| 封面图 URL | 视频播放前显示的封面图片 URL。 |
| 水印 | 启用水印保护功能。传入水印数据 URL，支持图片水印、文字水印及防录屏保护。可使用水印工具在线编辑生成。 |
| 进度条预览图 | 启用鼠标悬停进度条时的缩略图预览。需要配合缩略图字段使用。 |
| 缩略图 (JSON) | 缩略图雪碧图的 JSON 配置。字段包括：url、width、height、row、col、total。点击"缩略图工具"链接可在线生成。 |
功能组件
开关各种播放器功能和 UI 组件。
| 参数 | 说明 |
|---|---|
| 弹幕 | 启用弹幕系统。未填写弹幕服务器地址时，弹幕仅在本地显示（发送的弹幕只出现在自己的播放器中）。如需实现跨用户实时弹幕，请填写弹幕服务器地址。 |
| 弹幕服务器地址 | 弹幕通信的 WebSocket 服务器 URL。填写后可启用跨用户实时弹幕；留空则弹幕仅在本地预览显示。 |
| 自动播放 | 播放器加载后自动开始播放。大多数浏览器要求静音模式才能自动播放。 |
| 固定显示控制条 | 始终显示控制条，而不是在超时后自动隐藏。 |
| 静音 | 播放器以静音模式启动。现代浏览器通常要求静音才能自动播放。 |
| 功能按钮 | 开关独立的 UI 按钮：录制、片段、截图、倍速、设置、媒体信息、投屏、放大镜。 |
| 其他功能 | 本地播放（播放本地文件）、小窗播放（滚动时自动缩小播放器）、断线重连（流断开时自动重连）、优先 FLV（使用 flv.js 播放流媒体）。 |
| iOS 网页全屏 | 在 iOS 上用网页全屏模拟系统全屏（iOS 原生 Fullscreen API 受限），获得更流畅的全屏体验。 |
| 默认音量 | 设置初始音量（0-100）。不指定时使用播放器默认值。 |
| 控制条自动隐藏延迟 | 控制条自动隐藏前的延迟时间（毫秒）。仅在未开启"固定显示控制条"时生效。 |
播放控制
限制或禁用特定的用户交互功能。
| 参数 | 说明 |
|---|---|
| 失去焦点自动暂停 | 当浏览器标签或窗口失去焦点时自动暂停播放。 |
| 禁用拖拽进度条 | 禁止用户拖拽进度条进行跳转。 |
| 禁用播放按钮 | 隐藏或禁用播放/暂停按钮。 |
| 禁用音量控制 | 隐藏或禁用音量滑块。 |
| 禁止网页全屏 | 禁止进入全屏模式。 |
| 禁止画中画功能 | 禁止使用浏览器的画中画功能。 |
高级设置
配置字幕、章节和交互标注。
| 参数 | 说明 |
|---|---|
| 字幕 | 启用字幕支持，可添加多个字幕 URL。前两条为主/副字幕轨，其余进入字幕列表。支持格式：VTT、SRT、BCC。可使用字幕工具在线生成。 |
| 字幕下载 | 在 CC 字幕菜单的每条字幕后显示下载图标，可导出为 SRT 文件。 |
| 翻译 API 地址 | 实时字幕翻译的 API 地址。填写后字幕菜单显示「翻译」入口；留空则隐藏翻译功能。 |
| 章节 | 启用章节导航，提供 JSON 数组。每条包含：title（标题）、time（秒）、duration（秒），可选 desc 和 style 字段。可使用章节工具在线生成。 |
| 标注 | 启用视频上的交互标注（热区）。可使用标注工具在线可视化编辑生成。 |
在线工具
使用以下在线编辑器可视化生成配置数据，然后将结果粘贴到生成器对应的字段中。
| 工具 | 说明 |
|---|---|
| 在线播放列表 | 生成播放列表 JSON 数组。视频地址字段支持传入播放列表 JSON 作为单个 URL 的替代。 |
| 在线缩略图 | 从视频中提取帧并生成缩略图雪碧图，输出 ZWMAP JSON 格式。 |
| 在线字幕 | 创建和编辑字幕文件（VTT、SRT、BCC）。 |
| 在线章节 | 可视化标记视频章节并生成章节 JSON 数据。 |
| 在线标注 | 使用可视化编辑器创建视频上的交互标注（热区）。 |
| 在线水印 | 可视化创建图片或文字水印，支持位置、透明度和防录屏设置。 |
代码输出
生成的代码是完整的、自包含的 HTML 文件，包含 ZWPlayer 脚本和您的所有配置。
使用方法
切换到"代码生成"选项卡，点击复制代码按钮，粘贴到 HTML 文件或项目模板中。代码包含：
- ZWPlayer 脚本标签（从 /zwplayer/zwplayer.js 加载）
- 配置好尺寸的视频容器 div
- 包含所有设置的 ZWPlayer 初始化脚本
- 如果配置了字幕、章节或弹幕，会包含相应的附加调用
集成示例
最简集成代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/zwplayer/zwplayer.js"></script>
</head>
<body>
<div class="video" id="mse"
style="width:100%; height:500px;"></div>
<script>
var info = {
playerElm: 'mse',
url: 'https://example.com/video.mp4',
autoplay: true
};
window.zwplayer = new ZWPlayer(info);
</script>
</body>
</html>常见问题
什么是 ZWPlayer 在线代码生成助手？
ZWPlayer 代码生成器是一款免费的 HTML5 网页视频播放器配置工具。它允许开发者和网站管理员通过可视化的界面，轻松调整播放器的尺寸、外观、直播模式、弹幕服务器、字幕文件（VTT/SRT）以及进度条缩略图等高级功能。
如何将视频播放器嵌入到网页中？
只需在左侧面板填写您的媒体资源地址，并根据需要开启相关控制选项。右侧的实时预览会立即生效。调整完毕后，切换到"代码生成"选项卡，一键复制完整的 HTML/JavaScript 代码并粘贴到您的项目中。
支持哪些视频格式？
ZWPlayer 通过浏览器原生播放支持 MP4、WebM 和 OGG。流媒体方面支持 FLV（通过 flv.js）、HLS（通过 hls.js）、DASH（通过 dash.js）、MPEG-TS（通过 mpegts.js）以及 WebRTC 实时流。
如何启用弹幕？
在"功能组件"选项卡中开启弹幕开关。如果仅用于本地预览弹幕效果，不填服务器地址即可；如需实现多用户实时弹幕，请填写 WebSocket 弹幕服务器地址，生成的代码将自动包含连接逻辑和弹幕控制栏。
可以使用百分比设置尺寸吗？
可以。输入如 "100%" 的值即可实现响应式布局。您也可以开启流式布局模式，播放器会根据宽度自动按 16:9 比例计算高度。