All-in-one Flutter video player – stream from YouTube, Vimeo, network, assets files

Introduction #

omni_video_player is a Flutter video player built on top of Flutter’s official video_player plugin. It supports YouTube (via youtube_explode_dart), Vimeo videos (using flutter_inappwebview), as well as network and asset videos. A single unified controller is provided to manage playback across all supported video types seamlessly.

🎨 Highly customizable — tweak UI, show/hide controls, and easily integrate your own widgets.
🎮 The controller gives full control over video state and callbacks for smooth video management on mobile and web.

🎯 Long-term goal: to create a universal, flexible, and feature-rich video player that works flawlessly across all platforms and video sources, empowering developers with maximum control and customization options.

Supported Platforms & Status #

✨ Features #

• ✅ Play videos from:
  • YouTube (support for live and regular videos)
  • Vimeo (public)
  • Network video URLs
  • Flutter app assets
• 🎛 Customizable player UI (controls, theme, overlays, labels)
• 🔁 Autoplay, replay, mute/unmute, volume control
• ⏪ Seek bar & scrubbing
• 🖼 Thumbnail support (custom or auto-generated for YouTube and Vimeo)
• 🔊 Global playback & mute sync across players
• ⛶ Fullscreen player
• ⚙️ Custom error and loading widgets

🧪 Demo #

🚀 Getting Started #

Installation #

Check the latest version on:

dependencies:
  omni_video_player: <latest_version>

🛠️ Android Setup #

In your Flutter project, open:

android/app/src/main/AndroidManifest.xml

<!-- Add inside <manifest> -->
<uses-permission android:name="android.permission.INTERNET"/>

<!-- Add inside <application> -->
<application
    android:usesCleartextTraffic="true"
    ... >
</application>

✅ The INTERNET permission is required for streaming videos.

⚠️ The usesCleartextTraffic="true" is only needed if you're using HTTP (not HTTPS) URLs.

🍎 iOS Setup #

To allow video streaming over HTTP (especially for development or non-HTTPS sources), add the following to your Info.plist file:

<!-- ios/Runner/Info.plist -->
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

📦 Usage Examples #

Network #

VideoSourceConfiguration.network(
  videoUrl: Uri.parse('https://example.com/video.mp4'),
);

YouTube #

VideoSourceConfiguration.youtube(
  videoUrl: Uri.parse('https://youtu.be/xyz'),
  preferredQualities: [OmniVideoQuality.high720, OmniVideoQuality.low144],
);

Vimeo #

VideoSourceConfiguration.vimeo(
  videoId: '123456789',
  preferredQualities: [OmniVideoQuality.high720],
);

Asset #

VideoSourceConfiguration.asset(
  videoDataSource: 'assets/video.mp4'),
);

📱 Example App #

Explore the example/ folder for working demos:

• Full demo using different video sources: main.dart
• Minimal setup with controller and play/pause logic: example.dart

💡 Great starting points to understand how to integrate and customize the player.

🎯 Sync UI with AnimatedBuilder #

When using OmniPlaybackController, the controller itself is a Listenable, meaning it notifies listeners when playback state changes (e.g. play, pause, fullscreen).

To build dynamic UI that reacts to those changes (like updating a play/pause button), wrap your widgets with AnimatedBuilder:

OmniVideoPlayer(
  options: VideoPlayerConfiguration.youtube(
    videoUrl: Uri.parse('https://www.youtube.com/watch?v=cuqZPx0H7a0'),
  ),
  callbacks: VideoPlayerCallbacks(
    onControllerCreated: (controller) {
      _controller = controller;
      setState(() {}); // Enables the button below
    },
  ),
),

AnimatedBuilder(
  animation: Listenable.merge([controller]),
  builder: (context, _) {
    if (controller == null) return const CircularProgressIndicator();

    final isPlaying = controller.isPlaying;

    return ElevatedButton.icon(
      onPressed: () =>
          isPlaying ? controller.pause() : controller.play(),
      icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
      label: Text(isPlaying ? 'Pause' : 'Play'),
    );
  },
);

✅ Why it's needed #

Flutter widgets don’t rebuild on Listenable changes by default. AnimatedBuilder lets your UI stay in sync without manually calling setState() on every controller update — making your code more efficient and reactive.

ℹ️ Recommended for any UI that depends on the controller (playback state, fullscreen, etc.). It ensures consistent behavior and avoids state mismatch.

🔮 Future Developments #

📄 License #

BSD 3-Clause License – see LICENSE