video_view 1.2.3
video_view: ^1.2.3 copied to clipboard
A lightweight media player with subtitle rendering and audio track switching support, leveraging system or app-level components for seamless playback.
video_view
is a lightweight media player with subtitle rendering1 and audio track switching support, leveraging system or app-level components for seamless playback. For API documentation, please visit here.
Key benefits:
- Complete platform coverage: Android, iOS, macOS, Windows, Web, Linux.
- Internal subtitle rendering, audio track switching, max bitrate/resolution limits.
- Fine-grained status notification with reentrancy prevention.
- Small, widget-first API: drop-in
VideoView(source: ...)
to start.
NOTE: video_view
requires Flutter 3.32 or higher.
Demo #
You may try the online demo, or run the demo app locally by cloning this repository:
git clone https://github.com/xxoo/flutter_video_view.git
cd flutter_video_view/example
For basic usage, just run:
flutter run
For advanced usage, please run:
flutter run lib/main_advanced.dart
Installation #
- Add dependency in your project by running:
flutter pub add video_view
- Reference
video_view
in your Dart code:
import 'package:video_view/video_view.dart';
- If your project has web support, you may also need to initialize the web entry point by running the following command after installing or updating this package:
dart run video_view:webinit
Sample code #
Without controller:
import 'package:flutter/widgets.dart';
import 'package:video_view/video_view.dart';
void main() => runApp(VideoView(
source: 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
autoPlay: true,
looping: true,
));
Custom controller:
import 'package:flutter/material.dart';
import 'package:video_view/video_view.dart';
void main() => runApp(MaterialApp(builder: (_, _) => const MyApp()));
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _player = VideoController();
@override
initState() {
super.initState();
_player.open(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
);
_player.playbackState.addListener(() => setState(() {}));
}
@override
dispose() {
_player.dispose();
super.dispose();
}
@override
build(_) => Stack(
alignment: Alignment.center,
children: [
VideoView(controller: _player),
IconButton(
iconSize: 64,
icon: const Icon(Icons.play_arrow),
isSelected:
_player.playbackState.value == VideoControllerPlaybackState.playing,
selectedIcon: const Icon(Icons.pause),
onPressed: () =>
_player.playbackState.value == VideoControllerPlaybackState.playing
? _player.pause()
: _player.play(),
),
],
);
}
Platform support #
Platform | Version | Backend |
---|---|---|
Android | 6+ | ExoPlayer |
iOS | 15+ | AVPlayer |
macOS | 12+ | AVPlayer |
Windows | 10+ | MediaPlayer2 |
Linux | N/A | mpv3 |
Web | Chrome 84+ / Safari 15+ / Firefox 90+ | <video>, ShakaPlayer4 |
Supported media formats #
For user who only cares about Android and iOS, the following formats are supported without condition:
Type | Formats |
---|---|
Video Codec | H.264, H.265 |
Audio Codec | AAC, MP3 |
Container Format | MP4, TS |
Subtitle Format | WebVTT, CEA-608/708 |
Transfer Protocol | HTTP, HLS, LL-HLS |
A more complete list with conditions:
Type | Formats |
---|---|
Video Codec | H.264, H.265(HEVC)5, AV16 |
Audio Codec | AAC, MP3 |
Container Format | MP4, TS, WebM6 |
Subtitle Format | WebVTT7, CEA-608/708 |
Transfer Protocol | HTTP, HLS, LL-HLS, DASH8, MSS8 |
How to specify format manually #
Most backends don't support manually specifying media format, with Android and Web being the exceptions. Therefore, no formal API planned for this feature. However, supported platforms can still automatically detect stream format from URL. You may simply append a file extension to the query string or hash fragment to specify the format. Please note that only 3 extensions are recognized: .m3u8
, .mpd
, and .ism/manifest
. If multiple extensions are found, the last one takes precedence. For example:
// No need to specify format, the url already contains `.m3u8`
final example0 = 'https://example.com/video.m3u8';
// Missing extension in path, add `.m3u8` in hash fragment
final example1 = 'https://example.com/video#.m3u8';
// Or in query string
final example1 = 'https://example.com/video?.m3u8';
// Override HLS to DASH
final example2 = 'https://example.com/video.m3u8#.mpd';