Wistia S3 Player

A Video.js-based video player that mimics the Wistia player UI. Built with Vue 3.

Features

• 🎬 Wistia-style video player controls
• 🎨 Vue 3 Composition API
• 📦 Drop-in replacement for Wistia embeds
• 🎞️ Quality selector support
• 🖼️ Sprite thumbnails
• 📊 Built-in Google Analytics 4 (gtag) tracking
• 🎯 Video chapter markers with timeline indicators
• 🔔 Custom event bindings for playback tracking

Tracking & Events

The player includes a built-in trackingService that automatically tracks video playback events via Google Analytics 4 (gtag.js).

Tracked Events

| Event Name | Triggered When | |---|---| | wistia_play | Video starts playing | | wistia_seconds_played | Every 60 seconds of playback | | wistia_25_percent_played | 25% watched | | wistia_50_percent_played | 50% watched | | wistia_75_percent_played | 75% watched | | wistia_95_percent_played | 95% watched |

Custom Event Binding

Listen to the video-player-ready event to bind custom callbacks:

window.addEventListener("video-player-ready", (e) => {
  const watcher = e.detail;
  const hashId = watcher.getHashId();

  watcher.bind('play', () => {
    console.log('Video played:', hashId);
  });

  watcher.bind('end', () => {
    console.log('Video ended:', hashId);
  });

  watcher.bind('percentwatchedchanged', (percent, lastPercent) => {
    console.log(`Progress: ${percent}%`);
  });
});

Configure GA4 Measurement ID

Pass the MeasurementId prop when embedding:

<div class="wistia_embed wistia_async_YOUR_VIDEO_ID" data-measurement-id="G-XXXXXXX"></div>

Chapter Markers

The player automatically fetches and renders chapter markers from markers.json stored alongside the video assets on S3.

Markers Format

Place a markers.json file in the same directory as your video assets:

{
  "markers": [
    { "time": 0, "title": "Introduction" },
    { "time": 30, "title": "Getting Started" },
    { "time": 120, "title": "Advanced Features" }
  ]
}

Features

• Visual markers on the progress bar with hover tooltips
• Click any marker to seek to that timestamp
• Chapters menu button in the control bar for navigation
• Auto-fetched on video load from {baseURL}/{hashId}/markers.json

Custom Endpoint

Override the default S3 endpoint:

window.MEDIA_ENDPOINT = 'https://your-cdn.com/wistia-backup/media';

Development

# Install dependencies
yarn install

# Start dev server
yarn serve

# Production build
yarn build

# Build demo
yarn demo

# Release to npm (auto-version + build + publish)
yarn release

Project Structure

src/
├── main.js              # Entry point (init & render exports)
├── WistiaPlayer.vue     # Main player component
├── httpService.js       # HTTP service
├── trackingService.js   # Analytics tracking
├── plugins/             # Video.js plugins
├── style/               # SCSS styles
└── webpack/             # Custom webpack plugins

Requirements

• Supports IE 11+, modern browsers
• Built with Video.js 8.x and Vue 3.x

License

Apache-2.0