Video.js Enhanced Plugin for Copyparty

A comprehensive Video.js plugin for copyparty file server with advanced features including automatic subtitle loading, custom playback controls, and MPEG-TS support.

Features

Video Playback

• Multiple Format Support: MP4, WebM, OGG, MKV, AVI, MOV, M3U8 (HLS), and TS (MPEG-TS)
• MPEG-TS Optimization: HTTP range-based seeking with lazy loading for .ts files
• mpegts.js Integration: Automatic loading for transport stream files
• Responsive Modal Player: Fullscreen overlay with proper aspect ratio handling

Subtitle Management

• Automatic Detection: Scans for .srt and .vtt subtitle files automatically
• English Priority: Auto-selects English subtitles as default track
• Multiple Languages: Supports English, Vietnamese, Japanese, and custom patterns
• Format Conversion: Automatic SRT to VTT conversion
• Manual Upload: Upload custom subtitle files (SRT, VTT, ASS formats)
• Language Patterns:
  • video.srt / video.vtt
  • video.en.srt / video-en.srt
  • video.vi.srt / video.ja.srt

Enhanced Controls

• Rewind 5s: Skip backward 5 seconds
• Forward 5s: Skip forward 5 seconds
• Clickable Time Display: Toggle between elapsed time and remaining time
• Variable Playback Speed: 0.25x to 2x speed control
• Auto-hide Controls: Fade out after 3 seconds of inactivity
• Dynamic Fullscreen Icon: Changes icon based on fullscreen state (⛶/⊗)
• Tooltips: Hover over any control to see its function
• Touch Device Friendly: Single Tap to Pause/Play, Double Tap sides for Fast-forward and Rewind, Drag screen to seek

Recently Played & Resume

• Persistent History: Every video you open is saved to a "Recently Played" list that survives page reloads and browser restarts (stored client-side via localStorage)
• Resume Where You Left Off: Reopening a video (from the file browser or the panel) continues from your last position, with a brief "Resumed from mm:ss" notice
• Recently Played Panel: A floating 🕒 button in the bottom-right corner opens a slide-in panel showing your recent videos, each with:
  • A thumbnail captured from the video (a frame grabbed during playback)
  • A watch-progress bar and last-played time (e.g. "2 hours ago")
  • Click-to-resume — tap any item to reopen and continue it
  • Play from beginning (⏮) — restart an in-progress video instead of resuming
  • Per-item remove, plus a "Clear all" button
  • A count badge on the button
• Per-Server: The list is scoped to each copyparty server (browser origin), and links are rebuilt against the current host so they keep working across host/port changes
• Smart Thresholds: Videos watched to within 15s of the end are marked "Watched" and start over on next open; barely-started videos (< 5s) don't trigger a resume
• Capacity: Keeps the 50 most recently played videos. Thumbnails are stored locally too; if browser storage fills up, they're dropped automatically while the history itself is preserved
• Thumbnails are only captured for same-origin videos (the normal copyparty case); cross-origin sources fall back to a play icon

Cross-Session & Cross-Device Sync

When you're logged in, your recently-played list (with resume positions and thumbnails) follows your account across browsers and devices — not just the current browser.

• How it works: on load, the plugin stores a small per-user JSON file on the copyparty server and merges it with the local copy, so history and progress accumulate across everywhere you watch
• Automatic location: it finds a folder your account can write to — preferring the site root so every device points at the same file — and stores the list there as a hidden .copyparty-video-recent.<user>.json. No setup required
• Private per account: the file is named after your username (CGV.acct) and written with your own login, so each account keeps its own separate list
• Merge, not overwrite: additions and the latest resume position are unioned across devices; removing an item or "Clear all" pushes the deletion to the server
• Graceful fallback: anonymous visitors, or accounts without a writable folder, transparently use browser-local storage only
• Configuration (top of the script):
  • RECENT_SYNC_ENABLED — set to false to disable server sync entirely
  • RECENT_SYNC_DIR — pin the file to a specific folder (e.g. /priv) instead of auto-detecting. The folder must grant the account write + delete (delete is required to overwrite the file in place)

UI Enhancements

• Right-aligned Controls: Speed, subtitle, and fullscreen controls aligned to the right
• Smooth Animations: Fade transitions for control visibility
• Dark Theme: Optimized for low-light viewing
• Hover Effects: Visual feedback on all interactive elements
• Custom Subtitle Styling: Large, readable subtitles with shadows

Installation

For Copyparty

Load the plugin when starting copyparty:

copyparty --js-browser /path/to/videojs-enhanced.js

File Location

Place the script file in a directory accessible by your copyparty server, for example:

/downloads/.copyparty-videojs/videojs-enhanced.js

Usage

1. Start Copyparty with the plugin loaded
2. Browse to a video file in the copyparty web interface
3. Click on the video file - the enhanced player will open automatically
4. Subtitles: Place subtitle files with the same name as the video file
   • Example: movie.mp4 → movie.srt or movie.en.srt

Control Layout

┌─────────────────────────────────────────────────────────────────────┐
│ [Progress Bar - Full Width]                                          │
├─────────────────────────────────────────────────────────────────────┤
│ ▶ 🔊 ⏪ ⏩ 00:00 / 10:00 ════════[gap]════════ 1x 📁 CC ⛶         │
└─────────────────────────────────────────────────────────────────────┘

Legend:
▶  = Play/Pause
🔊 = Volume
⏪ = Rewind 5 seconds
⏩ = Forward 5 seconds
00:00 = Current time (click to toggle elapsed/remaining)
/ = Divider
10:00 = Duration
1x = Playback speed
📁 = Upload subtitle
CC = Subtitle tracks
⛶ = Fullscreen (changes to ⊗ when fullscreen)

Keyboard Shortcuts

Standard Video.js keyboard shortcuts apply:

• Space: Play/Pause
• ←/→: Skip 5 seconds (with custom buttons)
• ↑/↓: Volume control
• F: Toggle fullscreen
• M: Mute/Unmute

Supported Video Formats

Format	Extension	Notes
MP4	.mp4, .m4v	Native HTML5 support
WebM	.webm	Native HTML5 support
OGG	.ogg, .ogv	Native HTML5 support
AVI	.avi	Browser-dependent
QuickTime	.mov	Browser-dependent
MPEG-TS	.ts	Via mpegts.js (lazy loaded)
HLS	.m3u8	Native or via VHS

Subtitle Formats

• VTT (WebVTT): Native support, no conversion needed
• SRT (SubRip): Automatically converted to VTT
• ASS (Advanced SubStation): Automatically converted to VTT

Technical Details

Dependencies

• Video.js: 8.17.3 (loaded from CDN)
• mpegts.js: Latest (lazy loaded for .ts files only)

CDN Resources

• Video.js CSS: https://vjs.zencdn.net/8.17.3/video-js.css
• Video.js Script: https://vjs.zencdn.net/8.17.3/video.min.js
• mpegts.js: https://cdn.jsdelivr.net/npm/mpegts.js/dist/mpegts.min.js

Performance Optimizations

• Lazy Loading: mpegts.js only loads when needed
• HTTP Range Seeking: Efficient seeking in large .ts files
• Sequential Subtitle Checks: Reduces 404 spam with 50ms delays
• Auto Cleanup: Manages source buffers for long playback sessions

Browser Compatibility

• 🗸 Chrome/Edge (Recommended)
• 🗸 Firefox
• 🗸 Safari (with limitations on some formats)
• 🗸 Modern mobile browsers (iOS Safari, Chrome Mobile)

Troubleshooting

Subtitles Not Loading

• Ensure subtitle file is in the same directory as video
• Check subtitle file name matches video name
• Verify file format is .srt or .vtt
• Check browser console for 404 errors

Video Won't Play

• Check if browser supports the video format
• For .ts files, ensure network allows CDN access to mpegts.js
• Try refreshing the page
• Check browser console for errors

Controls Not Hiding

• Mouse movement resets the 3-second timer
• Controls always show when video is paused
• Ensure JavaScript is enabled

Configuration

The plugin is designed to work out-of-the-box with sensible defaults:

• Auto-hide delay: 3 seconds
• Skip duration: 5 seconds
• Playback speeds: 0.25x, 0.5x, 0.75x, 1x, 1.25x, 1.5x, 1.75x, 2x
• Subtitle check delay: 50ms between patterns
• Recently played history: 50 most recent videos (localStorage key copyparty-vjs-recent)
• Resume thresholds: resumes when the saved position is > 5s and not within 15s of the end
• Cross-session sync: on by default when logged in (RECENT_SYNC_ENABLED); auto-detects a writable folder unless RECENT_SYNC_DIR is set. The sync file requires an account with write + delete access

License

This plugin integrates with:

• Video.js (Apache 2.0 License)
• mpegts.js (Apache 2.0 License)
• Copyparty (MIT License)

Version

Current Version: Enhanced with auto-hide controls, clickable time display, and dynamic fullscreen icons

Video.js Version: 8.17.3