ZWPlayer: A Free HTML5 Video Player with AI Subtitles, Interactive Annotations, and Vue 2/3 Support

chenfanyu — Sun, 26 Jul 2026 03:06:05 +0000

If you've ever tried to add a serious video player to a web project — one that handles streaming protocols, subtitles, interactivity, and framework integration — you know how painful it can get. That's why I built ZWPlayer.

In this post, I'll walk you through what ZWPlayer is, why it exists, what it can do, and how to integrate it into your project.

What is ZWPlayer?

ZWPlayer is a free, full-featured HTML5 video player designed for modern web applications. The entire core is a single JavaScript file with zero external dependencies — no jQuery, no third-party CDN required. It works in any environment, including air-gapped intranets.

It comes with:

Native wrapper components for Vue 2, Vue 3, and React
A WordPress plugin (Gutenberg block)
A suite of free online visual editors
AI-powered subtitle translation, speech recognition, and voice synthesis

🌐 Website: https://www.zwplayer.com
🎮 Live demo: https://www.zwplayer.com/tools/videoplayer/

Why I Built It

A few years ago, I needed a web video player for a project. The requirements were:

Support multiple streaming protocols (HLS, DASH, FLV, WebRTC)
Built-in danmaku (bullet comments) — a must for the Chinese market
Multi-track subtitle support with search and translation
Interactive video capabilities (quizzes, hotspots, forms)
Easy integration with Vue.js
Free

I evaluated the existing options:

Video.js: Good protocol support, but no built-in danmaku, basic subtitles, no interactive features, and relies on community plugins for Vue.
Plyr: Clean UI, but limited streaming protocols, no danmaku, basic subtitles, and no official Vue support. ...

Nothing checked all the boxes. So I started building my own — and it grew into something much bigger than I originally planned.

Streaming Protocol Support

ZWPlayer handles virtually every streaming protocol you'll encounter:

MP4 / WebM / OGG — Native browser playback
HLS (.m3u8) — HTTP Live Streaming via hls.js
DASH (.mpd) — Dynamic Adaptive Streaming via dash.js
HTTP-FLV — Low-latency streaming via flv.js
MPEG-TS — Transport stream via mpegts.js
WebRTC — Real-time streaming
RTSP — Play RTSP streams directly in the browser through a media gateway, no plugins needed

Protocol plugins are loaded on demand at runtime — they're never bundled into your application. This keeps your bundle lean and the player's initial load fast.

🤖 AI-Powered Features

This is where things get exciting. ZWPlayer integrates AI capabilities directly into the playback experience:

Real-Time Subtitle Translation

Connect a translation API and subtitles are translated on-the-fly during playback. The translated text appears as a secondary subtitle track below the original. Supports 13 languages.

ASR — Automatic Speech Recognition

No subtitle file? No problem. ZWPlayer can leverage AI speech recognition to automatically extract text from video audio and generate subtitles. No manual transcription needed.

TTS — Text-to-Speech Synthesis

Generate spoken narration from subtitle text using AI voice synthesis. Useful for:

Adding voiceovers to foreign-language content
Accessibility (screen reader alternative)
Dubbing and localization workflows

🎯 Interactive Annotation System

This is the feature I'm most proud of. ZWPlayer lets you overlay 13 types of interactive components on the video timeline:

Hotspot: Clickable regions on the video
Button: Action triggers
Text: Overlay text messages
Image: Display images at specific times
Choice: Multiple-choice questions
Quiz: Knowledge-check questions
Form: Collect user input
Poll: Audience voting
Card: Information cards
Webview: Embed external web pages
Map: Display interactive maps
Countdown: Timer overlays
Speed Controller: Playback speed adjustment

Use cases:

E-learning: Pause the video at a key concept, present a quiz, and only continue if the answer is correct
Corporate training: Compliance checks with mandatory completion
Marketing: Interactive product demos with clickable hotspots

All annotations support 18 entrance/emphasis/exit animations and session variables for conditional logic.

Visual Annotation Editor

You don't need to write JSON by hand. ZWPlayer includes a drag-and-drop visual editor where you can place interactive components on the video timeline, configure their behavior, and export the result as JSON:

👉 Try the Annotation Editor

Vue 2 & Vue 3 Integration

ZWPlayer provides dedicated npm packages for both Vue 2 and Vue 3. The API is identical across both versions — same props, same events, same methods.

Installation

# Vue 3
npm install zwplayervue3 --save

# Vue 2
npm install zwplayer-vue2x --save

Vue 3 Example (Composition API)

<template>
  <zwplayer
    v-if="playerOpen"
    ref="zwplayerRef"
    :murl="movieUrl"
    @onready="onPlayerReady"
    @onmediaevent="onPlayerMediaEvent"
    :autoplay="false"
    :fluid="true"
    :enableDanmu="true"
    :snapshotButton="true"
    :chapterButton="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import { zwplayer } from 'zwplayervue3'

const movieUrl = ref('https://your-video-url.mp4')
const playerOpen = ref(true)
const zwplayerRef = ref(null)

const onPlayerReady = () => {
  console.log('Player is ready!')
  const player = zwplayerRef.value

  // Set chapters
  player.setChapters([
    { title: 'Introduction', time: 0, duration: 60 },
    { title: 'Main Content', time: 60, duration: 120 },
    { title: 'Summary', time: 180, duration: 60 }
  ])
}

const onPlayerMediaEvent = (event) => {
  console.log('Media event:', event.type)
}
</script>

Vue 2 Example (Options API)

<template>
  <zwplayer
    v-if="playerOpen"
    ref="zwplayerRef"
    :murl="movieUrl"
    @onready="onPlayerReady"
    :autoplay="false"
    :fluid="true"
  />
</template>

<script>
import { zwplayer } from 'zwplayer-vue2x'

export default {
  components: { zwplayer },
  data() {
    return {
      movieUrl: 'https://your-video-url.mp4',
      playerOpen: true
    }
  },
  methods: {
    onPlayerReady() {
      const player = this.$refs.zwplayerRef
      console.log('Player is ready!', player)
    }
  }
}
</script>

Key Differences Between Vue 2 and Vue 3 Packages

Package name: zwplayer-vue2x (Vue 2) vs zwplayervue3 (Vue 3)
Registration: Local / Global (Vue 2) vs Local / Global / app.use() (Vue 3)
Composition API: ❌ (Vue 2) vs ✅ Full <script setup> (Vue 3)
Style scoping: /deep/ or ::v-deep (Vue 2) vs :deep() (Vue 3)
Build tools: Vue CLI / Webpack (Vue 2) vs Vite or Webpack (Vue 3)

Props, events, and methods are identical. Migrating from Vue 2 to Vue 3 requires only changing the import — everything else stays the same.

Architecture: Dynamic Loading

One design decision worth highlighting: the Vue wrapper packages do not bundle the player core into your Vue build output. Instead, the core library is placed in your public/zwplayer directory and loaded dynamically at runtime.

This gives you three advantages:

Smaller bundle size — your Vue app stays lean
Seamless upgrades — just replace the zwplayer.js file, no rebuild needed
CDN flexibility — point to a custom CDN via the zwplayerlib prop

More Features

💬 Danmaku (Bullet Comments)

Built-in danmaku engine. Send danmaku directly from your Vue component:

const player = this.$refs.zwplayerRef
player.appendDanmu({
  text: 'Great video!',
  color: '#ff6b6b',
  border: '1px solid #ccc'
})

📝 Multi-Track Subtitles

Supports SRT, WebVTT, and BCC formats
Load multiple subtitle tracks and assign primary/secondary display
Full-text subtitle search — find any line in the transcript instantly
A-B loop — select a subtitle line and loop that segment for language learning practice
Export individual tracks as SRT files

🔒 Anti-Piracy Watermark

Three modes:

Static — fixed position
Dynamic — bounces around the video frame (anti-screen-recording)
Tiled — covers the entire frame

Supports template variables: {user_name}, {ip}, {time} — so even if someone records the screen, you can trace it back to the viewer.

👉 Try the Watermark Editor

📑 Chapters & Thumbnails

JSON-based chapter markers with visual indicators on the progress bar
Thumbnail sprite sheet preview on hover
Both have dedicated visual editors

📋 Playlists

Multi-level grouping structure
Each video can have its own subtitles, chapters, watermarks, and annotations
Automatic progress memory
Continuous playback with error auto-skip

And More...

📸 Screenshots
🔍 Canvas magnifier (press Z to toggle, 1.5x–4x zoom)
📺 Casting (Google Cast + AirPlay)
🖥️ Picture-in-Picture
🎙️ Screen recording
🔊 Volume boost
📱 iOS web fullscreen with safe-area support
📂 Local file drag-and-drop playback

Free Online Visual Tools

I built a suite of visual editors that output JSON the player consumes directly. All free, no registration required:

Annotation Editor: Drag-and-drop interactive components - Open
Watermark Editor: Configure watermark visually - Open
Subtitle Editor: Edit and translate subtitles - Open
Chapter Editor: Mark chapter points - Open
Thumbnail Generator: Generate thumbnail sprite sheets - Open
Playlist Editor: Manage video playlists - Open

All tools export data in the ZWMAP unified JSON protocol. The player auto-detects the data type — just pass the JSON and it works.

ZWMAP: Unified Data Protocol

In v3.3.0, I introduced ZWMAP — a unified JSON protocol that standardizes the data format across all six modules: thumbnails, chapters, subtitles, watermarks, annotations, and playlists.

Every visual editor exports data in this format. The player automatically identifies the type and applies it. This means you can manage all your video metadata in one consistent schema.

Links & Resources

Website: https://www.zwplayer.com
Live Demo: https://www.zwplayer.com/tools/videoplayer/
Documentation: https://www.zwplayer.com/docs/support.html
Vue 3 NPM: zwplayervue3
Vue 2 NPM: zwplayer-vue2x
React NPM: zwplayer-react
Vue 3 Demo Repo: GitHub
Vue 2 Demo Repo: GitHub
GitHub Releases: Releases
WordPress Plugin: wordpress.org

Wrapping Up

ZWPlayer started as a personal itch — I needed a video player that could do more than just play video. Over the years it has grown into a complete interactive video ecosystem with AI capabilities, a unified data protocol, visual editing tools, and framework-native integrations.

It's completely free to use. No ads, no tracking, no telemetry. Works in air-gapped environments.

If you're building anything with video on the web — whether it's an e-learning platform, a corporate training system, a media site, or just a side project — I'd love for you to give it a try.

Feedback, suggestions, and feature requests are all welcome. Feel free to leave a comment or reach out!

DEV Community: chenfanyu