DEV Community

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

Posted on

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

#vue #javascript #video #webdev

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.

zwplayer-subtitle-audiotrack

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Smaller bundle size — your Vue app stays lean
  2. Seamless upgrades — just replace the zwplayer.js file, no rebuild needed
  3. 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'
})
Enter fullscreen mode Exit fullscreen mode

📝 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

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!

Top comments (0)