A Flutter plugin for iOS, Android and Web for playing back video on a Widget surface.
Android | iOS | macOS | Web | |
---|---|---|---|---|
Support | SDK 16+ | 11.0+ | 10.14+ | Any* |
First, add video_player
as a dependency in your pubspec.yaml file.
If you need to access videos using http
(rather than https
) URLs, you will need to add the appropriate NSAppTransportSecurity
permissions to your app's Info.plist file, located in <project root>/ios/Runner/Info.plist
. See Apple's documentation to determine the right combination of entries for your use case and supported iOS versions.
If you are using network-based videos, ensure that the following permission is present in your Android Manifest file, located in <project root>/android/app/src/main/AndroidManifest.xml
:
<uses-permission android:name="android.permission.INTERNET"/>
If you are using network-based videos, you will need to add the com.apple.security.network.client
entitlement
The Web platform does not suppport
dart:io
, so avoid using theVideoPlayerController.file
constructor for the plugin. Using the constructor attempts to create aVideoPlayerController.file
that will throw anUnimplementedError
.
* Different web browsers may have different video-playback capabilities (supported formats, autoplay...). Check package:video_player_web for more web-specific information.
The VideoPlayerOptions.mixWithOthers
option can't be implemented in web, at least at the moment. If you use this option in web it will be silently ignored.
import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() => runApp(const VideoApp()); /// Stateful widget to fetch and then display video content. class VideoApp extends StatefulWidget { const VideoApp({super.key}); @override _VideoAppState createState() => _VideoAppState(); } class _VideoAppState extends State<VideoApp> { late VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.networkUrl(Uri.parse( 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')) ..initialize().then((_) { // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed. setState(() {}); }); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Video Demo', home: Scaffold( body: Center( child: _controller.value.isInitialized ? AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ) : Container(), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _controller.value.isPlaying ? _controller.pause() : _controller.play(); }); }, child: Icon( _controller.value.isPlaying ? Icons.pause : Icons.play_arrow, ), ), ), ); } @override void dispose() { super.dispose(); _controller.dispose(); } }
The following section contains usage information that goes beyond what is included in the documentation in order to give a more elaborate overview of the API.
This is not complete as of now. You can contribute to this section by opening a pull request.
You can set the playback speed on your _controller
(instance of VideoPlayerController
) by calling _controller.setPlaybackSpeed
. setPlaybackSpeed
takes a double
speed value indicating the rate of playback for your video. For example, when given a value of 2.0
, your video will play at 2x the regular playback speed and so on.
To learn about playback speed limitations, see the setPlaybackSpeed
method documentation.
Furthermore, see the example app for an example playback speed implementation.