wikha_video_player 1.1.1

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

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.

Parameters:

• id (required): Unique video identifier
• title (required): Video title
• description: Video description
• url: Direct video URL or local path
• playbackId: Mux playback ID (if isMux is true)
• isMux: Is this a Mux video
• isSigned: Is this a signed Mux video
• playbackToken: Token for signed Mux videos
• audioTracks: List of audio tracks
• subtitleTracks: List of subtitle tracks
• storyboardUrl: WebVTT storyboard URL for previews
• isLive: Is this a live stream

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details

🙏 Credits

Built with:

• video_player
• flutter_animate
• google_fonts
• font_awesome_flutter
• universal_html

📧 Support

For issues and feature requests, please use the GitHub issue tracker.