WikhaVideoPlayer

A highly polished, feature-rich Flutter video player with Netflix-style UI, supporting Mux/HLS streams, multi-track audio/subtitles, live streaming, and advanced features like storyboard previews and Picture-in-Picture.

✨ Features

🎬 Core Experience

Cross-Platform: Works on iOS, Android, Web, macOS, Windows, and Linux
Network & Local Files: Automatic detection and handling of both network URLs and local file paths
Mux Integration: Native support for Mux Playback IDs with HLS streaming
Playlist Management: Beautiful slide-out drawer with auto-advance
Modern UI: Dark theme with customizable accent colors and smooth animations

🌍 Localization

French by Default: Core UI localized in French
Auto-Detection: Automatically switches to English based on app locale
Customizable: Easy to add your own translations with WikhaPlayerStrings

🎧 Advanced Media Controls

Multi-Audio Tracks: Netflix-style audio track switching that preserves playback position
Subtitle Support: Selection menu for VTT/SRT subtitle tracks
Storyboard Preview: Hover over the progress bar to see thumbnail previews (WebVTT format)
Picture-in-Picture: Pop-out video for multitasking (Web & Mobile)
AirPlay / Cast: Browser-native casting support

🔴 Live Streaming

Live Indicator: Visual "EN DIRECT" indicator for live streams
Sync to Live: One-click button to jump to the live edge

⌨️ Keyboard & Controls

Keyboard Shortcuts: Space (Play/Pause), Arrows (Seek/Navigation)
Fullscreen: Native fullscreen on all platforms
Auto-Hide Controls: Smart control visibility with user interaction detection

📦 Installation

Add to your pubspec.yaml:

dependencies:
  wikha_video_player: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start

import 'package:wikha_video_player/wikha_video_player.dart';

// Create your playlist
final playlist = [
  VideoData(
    id: '1',
    title: 'Big Buck Bunny',
    description: 'An open-source animated short film',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  ),
  // Add more videos...
];

// Use the player
WikhaVideoPlayer(
  playlist: playlist,
  baseColor: Colors.deepOrange,
  onProgress: (id, title, position, finished) {
    print('Progress: $title at ${position}s');
  },
  onVideoComplete: (id) {
    print('Video $id completed');
  },
)

📖 Advanced Usage

Mux Playback

VideoData(
  id: '1',
  title: 'My Mux Video',
  isMux: true,
  playbackId: 'your-mux-playback-id',
  // For signed URLs
  isSigned: true,
  playbackToken: 'your-playback-token',
)

Multi-Audio Tracks

VideoData(
  id: '1',
  title: 'Multilingual Video',
  isMux: true,
  playbackId: 'playback-id',
  audioTracks: [
    Track(id: 'en', label: 'English', language: 'en'),
    Track(id: 'fr', label: 'Français', language: 'fr'),
  ],
)

Storyboard Previews

VideoData(
  id: '1',
  title: 'Video with Thumbnails',
  url: 'https://example.com/video.m3u8',
  storyboardUrl: 'https://example.com/storyboard.vtt',
)

Live Streaming

VideoData(
  id: '1',
  title: 'Live Event',
  url: 'https://example.com/live.m3u8',
  isLive: true,
)

Local Files

// Works on mobile & desktop (not web for security reasons)
VideoData(
  id: '1',
  title: 'Local Video',
  url: '/path/to/video.mp4',  // macOS/Linux
  // OR
  url: 'C:\\path\\to\\video.mp4',  // Windows
)

Custom Localization

WikhaVideoPlayer(
  playlist: playlist,
  strings: WikhaPlayerStrings.en(),  // Force English
  // OR
  strings: WikhaPlayerStrings(
    play: 'Jouer',
    pause: 'Pause',
    // ... customize all strings
  ),
)

🎨 Customization

Colors

WikhaVideoPlayer(
  playlist: playlist,
  baseColor: Colors.purple,  // Customizes entire theme
)

Playlist Title

WikhaVideoPlayer(
  playlist: playlist,
  playlistTitle: 'My Custom Playlist',
)

🔧 Platform Support

Platform	Network Videos	Local Files	PiP	Fullscreen	Storyboard
iOS	✅	✅	✅	✅	✅
Android	✅	✅	✅	✅	✅
Web	✅	❌*	✅	✅	✅
macOS	✅	✅	⚠️	✅	✅
Windows	✅	✅	⚠️	✅	✅
Linux	✅	✅	⚠️	✅	✅

*Web cannot access local files for security reasons. Use blob URLs for uploaded files.

📝 API Reference

`WikhaVideoPlayer`

Main widget for the video player.

Parameters:

playlist (required): List of VideoData objects
baseColor: Accent color for the UI (default: Colors.red)
autoPlay: Auto-play first video (default: true)
playlistTitle: Custom title for playlist drawer (default: 'Playlist')
strings: Localization strings (default: auto-detected)
onProgress: Callback for playback progress (every 10s)
onVideoComplete: Callback when video ends

`VideoData`

Model for video information.