ZWPlayer Code Generator — User Guide
Configure and generate embeddable HTML5 video player code with a visual, real-time preview interface. Supports MP4, FLV, HLS, DASH, WebRTC, subtitles, chapters, danmaku, and more.
Getting Started
The ZWPlayer Code Generator is a free online tool that lets you visually configure a video player and instantly generate ready-to-use HTML/JavaScript code. No manual coding required — just configure, preview, and copy.
Quick Start Steps
-
Enter your video URL
Paste a video URL (MP4, FLV, HLS, DASH, or WebRTC) into the Video URL field. The preview will load automatically.
-
Configure the player
Use the tabs on the left panel to adjust basic settings, feature toggles, playback controls, and advanced options. Changes are reflected in real-time.
-
Preview the result
The right panel shows a live preview of the configured player. Click the Run button to force a refresh, or simply adjust settings and watch the preview update.
-
Copy the code
Switch to the "Generated Code" tab and click Copy Code. Paste the HTML snippet into your web project — it includes everything needed to run.
Basic Settings
These are the core parameters for setting up your video player.
| Parameter | Description |
|---|---|
| Is Live | Enable for live streaming sources. Changes player behavior to support real-time playback. |
| Video URL | The media resource URL. Supports MP4, FLV, HLS (m3u8), DASH (mpd), and WebRTC streams. You can also pass a playlist JSON array — click the Playlist Tool link to generate one. |
| Media Gateway URL | URL for the media gateway service. Used for advanced streaming setups. |
| Language | Player UI language. Options: English or Chinese. |
| Fluid Layout | Enable responsive layout. The player will automatically adjust its height to maintain a 16:9 aspect ratio based on its width. |
| Width / Height | Set the player dimensions. Supports pixel values (e.g., 640) or percentages (e.g., 100%). When no unit is specified, pixels are assumed. In fluid mode, height is calculated automatically. |
| Poster URL | URL of the poster/cover image displayed before the video starts playing. |
| Watermark | Enable watermark protection. Pass a watermark data URL supporting image, text watermarks and anti-screen-recording. Use the Watermark Tool to create visually. |
| Progress Tooltip | Enable thumbnail preview when hovering over the progress bar. Requires the Thumbnails field to be set. |
| Thumbnails (JSON) | A JSON object describing the thumbnail sprite sheet. Fields: url, width, height, row, col, total. Click the Thumbnail Tool link to generate one visually. |
Feature Components
Toggle various player features and UI components.
| Parameter | Description |
|---|---|
| Danmaku | Enable the danmaku (bullet comment) system. Without a server URL, danmaku only works locally (sent comments appear only in your own player). To enable real-time danmaku across users, fill in the Danmaku Server URL. |
| Danmaku Server URL | WebSocket server URL for danmaku communication. Required for real-time cross-user danmaku. If left empty, danmaku will only display locally as a preview. |
| Autoplay | Automatically start playback when the player loads. Most browsers require muted mode for autoplay to work. |
| Fixed Control Bar | Always show the control bar instead of hiding it after a timeout. |
| Muted | Start the player in muted mode. Often required for autoplay to work in modern browsers. |
| Feature Buttons | Toggle individual UI buttons: Record, Segment, Snapshot, Speed, Settings, Media Info, Cast, and Zoom. |
| Other Features | Local Playback (play local files), Auto Small Window (mini player on scroll), Reconnect (auto-reconnect on stream disconnect), Prefer FLV (use FLV.js for streaming). |
| iOS Web Fullscreen | Simulate system fullscreen using web fullscreen on iOS (where the native Fullscreen API is restricted), for a smoother fullscreen experience. |
| Default Volume | Set the initial volume level (0-100). If not specified, the player uses its default. |
| Hide Control Bar Timeout | Delay in milliseconds before the control bar auto-hides. Only effective when Fixed Control Bar is off. |
Playback Controls
Restrict or disable specific user interactions with the player.
| Parameter | Description |
|---|---|
| Pause on Lost Focus | Automatically pause playback when the browser tab or window loses focus. |
| Disable Seek | Prevent users from dragging the progress bar to seek. |
| Disable Play Button | Hide or disable the play/pause button. |
| Disable Volume Control | Hide or disable the volume slider. |
| Disable Fullscreen | Prevent entering fullscreen mode. |
| Disable Picture-in-Picture | Prevent the browser's Picture-in-Picture feature. |
Advanced Settings
Configure subtitles, chapters, and interactive annotations.
| Parameter | Description |
|---|---|
| Subtitles | Enable subtitle support and add multiple subtitle URLs. First two become primary/secondary tracks; the rest go to the subtitle list. Supported formats: VTT, SRT, BCC. Use the Subtitle Tool to generate subtitles. |
| Subtitle Download | Show a download icon on each subtitle in the CC menu to export it as an SRT file. |
| Translate API URL | Translation API endpoint for real-time subtitle translation. When set, a "Translate" entry appears in the subtitle menu; leave empty to hide the translation feature. |
| Chapters | Enable chapter navigation with a JSON array. Each entry has: title, time (seconds), duration (seconds), and optional desc and style fields. Use the Chapter Tool to generate chapters visually. |
| Annotations | Enable interactive annotations (hotspots) overlaid on the video. Use the Annotation Tool to create annotations visually. |
Online Tools
Use these online editors to visually generate configuration data, then paste the results into the corresponding fields in the generator.
| Tool | Description |
|---|---|
| Online Playlist | Generate playlist JSON arrays. The Video URL field accepts a playlist JSON as an alternative to a single URL. |
| Online Thumbnail | Extract video frames and generate thumbnail sprite sheets with ZWMAP JSON output. |
| Online Subtitle | Create and edit subtitle files (VTT, SRT, BCC) for your videos. |
| Online Chapter | Visually mark video chapters with timestamps and generate chapter JSON. |
| Online Annotation | Create interactive annotations (hotspots) overlaid on the video with a visual editor. |
| Online Watermark | Visually create image or text watermarks with position, opacity, and anti-screen-recording settings. |
Generated Code
The generated code is a complete, self-contained HTML file that includes the ZWPlayer script and all your configurations.
How to Use
Switch to the "Generated Code" tab and click the Copy Code button. Paste the code into an HTML file or your project template. The code includes:
- ZWPlayer script tag loaded from /zwplayer/zwplayer.js
- A video container div with your configured dimensions
- A ZWPlayer initialization script with all your settings
- Additional calls for subtitles, chapters, or danmaku if configured
Integration Example
A minimal integration looks like this:
<!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>Frequently Asked Questions
What is the ZWPlayer Code Generator?
The ZWPlayer Code Generator is a free, modern configuration tool for HTML5 video players. It allows developers and webmasters to easily customize player dimensions, aesthetics, live streaming modes, danmaku servers, subtitle files (VTT/SRT), and progress bar thumbnails through an intuitive interface without writing a single line of boilerplate code.
How to embed a video player in HTML?
Simply enter your media resource URL (such as MP4, FLV, or HLS stream) in the left panel and enable the required control options. The tool features WYSIWYG real-time preview. Once configured, switch to the "Generated Code" tab to instantly copy the complete HTML and JavaScript snippet directly into your web project.
What video formats are supported?
ZWPlayer supports MP4, WebM, and OGG via native browser playback. For streaming, it supports FLV (via flv.js), HLS (via hls.js), DASH (via dash.js), MPEG-TS (via mpegts.js), and WebRTC for real-time streaming.
How do I enable danmaku (bullet comments)?
Toggle the Danmaku switch in the Features tab. For local preview only, leave the server URL empty — danmaku will appear only in your own player. For real-time cross-user danmaku, fill in the WebSocket server URL and the generated code will include the full connection logic and control bar.
Can I use percentage-based dimensions?
Yes. Enter values like "100%" for responsive layouts. You can also enable Fluid Layout mode, which automatically calculates the height based on the width to maintain a 16:9 aspect ratio.