Playing videos is a common task in app development, and Flutter apps are no exception. To play videos, the Flutter team provides thevideo_player plugin. You can use thevideo_player plugin to play videos stored on the file system, as an asset, or from the internet.

On iOS, thevideo_player plugin makes use ofAVPlayer to handle playback. On Android, it usesExoPlayer.

This recipe demonstrates how to use thevideo_player package to stream a video from the internet with basic play and pause controls using the following steps:

1. Add thevideo_player dependency.
2. Add permissions to your app.
3. Create and initialize aVideoPlayerController.
4. Display the video player.
5. Play and pause the video.

This recipe depends on one Flutter plugin:video_player. First, add this dependency to your project.

To add thevideo_player package as a dependency, runflutter pub add:

$flutter pub add video_player

Next, update yourandroid andios configurations to ensure that your app has the correct permissions to stream videos from the internet.

Add the following permission to theAndroidManifest.xml file just after the<application> definition. TheAndroidManifest.xml file is found at<project root>/android/app/src/main/AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"><application ...>​</application>​<uses-permission android:name="android.permission.INTERNET"/></manifest>

For iOS, add the following to theInfo.plist file found at<project root>/ios/Runner/Info.plist.

<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>

If you use network-based videos,add thecom.apple.security.network.client entitlement.

Flutter web doesnot supportdart:io, so avoid using theVideoPlayerController.file constructor for the plugin. Using this constructor attempts to create aVideoPlayerController.file that throws anUnimplementedError.

Different web browsers might have different video-playback capabilities, such as supported formats or autoplay. Check thevideo_player_web package for more web-specific information.

TheVideoPlayerOptions.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.

Now that you have thevideo_player plugin installed with the correct permissions, create aVideoPlayerController. TheVideoPlayerController class allows you to connect to different types of videos and control playback.

Before you can play videos, you must alsoinitialize the controller. This establishes the connection to the video and prepare the controller for playback.

To create and initialize theVideoPlayerController do the following:

1. Create aStatefulWidget with a companionState class
2. Add a variable to theState class to store theVideoPlayerController
3. Add a variable to theState class to store theFuture returned fromVideoPlayerController.initialize
4. Create and initialize the controller in theinitState method
5. Dispose of the controller in thedispose method

classVideoPlayerScreenextendsStatefulWidget{constVideoPlayerScreen({super.key});​@overrideState<VideoPlayerScreen>createState()=>_VideoPlayerScreenState();}​class_VideoPlayerScreenStateextendsState<VideoPlayerScreen>{lateVideoPlayerController_controller;lateFuture<void>_initializeVideoPlayerFuture;​@overridevoidinitState(){super.initState();​// Create and store the VideoPlayerController. The VideoPlayerController// offers several different constructors to play videos from assets, files,// or the internet._controller=VideoPlayerController.networkUrl(Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',),);​_initializeVideoPlayerFuture=_controller.initialize();}​@overridevoiddispose(){// Ensure disposing of the VideoPlayerController to free up resources._controller.dispose();​super.dispose();}​@overrideWidgetbuild(BuildContextcontext){// Complete the code in the next step.returnContainer();}}

Now, display the video. Thevideo_player plugin provides theVideoPlayer widget to display the video initialized by theVideoPlayerController. By default, theVideoPlayer widget takes up as much space as possible. This often isn't ideal for videos because they are meant to be displayed in a specific aspect ratio, such as 16x9 or 4x3.

Therefore, wrap theVideoPlayer widget in anAspectRatio widget to ensure that the video has the correct proportions.

Furthermore, you must display theVideoPlayer widget after the_initializeVideoPlayerFuture() completes. UseFutureBuilder to display a loading spinner until the controller finishes initializing. Note: initializing the controller does not begin playback.

// Use a FutureBuilder to display a loading spinner while waiting for the// VideoPlayerController to finish initializing.FutureBuilder(future:_initializeVideoPlayerFuture,builder:(context,snapshot){if(snapshot.connectionState==ConnectionState.done){// If the VideoPlayerController has finished initialization, use// the data it provides to limit the aspect ratio of the video.returnAspectRatio(aspectRatio:_controller.value.aspectRatio,// Use the VideoPlayer widget to display the video.child:VideoPlayer(_controller),);}else{// If the VideoPlayerController is still initializing, show a// loading spinner.returnconstCenter(child:CircularProgressIndicator());}},)

By default, the video starts in a paused state. To begin playback, call theplay() method provided by theVideoPlayerController. To pause playback, call thepause() method.

For this example, add aFloatingActionButton to your app that displays a play or pause icon depending on the situation. When the user taps the button, play the video if it's currently paused, or pause the video if it's playing.

FloatingActionButton(onPressed:(){// Wrap the play or pause in a call to `setState`. This ensures the// correct icon is shown.setState((){// If the video is playing, pause it.if(_controller.value.isPlaying){_controller.pause();}else{// If the video is paused, play it._controller.play();}});},// Display the correct icon depending on the state of the player.child:Icon(_controller.value.isPlaying?Icons.pause:Icons.play_arrow,),)

import 'dart:async';import 'package:flutter/material.dart';import 'package:video_player/video_player.dart';void main() => runApp(const VideoPlayerApp());class VideoPlayerApp extends StatelessWidget {  const VideoPlayerApp({super.key});  @override  Widget build(BuildContext context) {    return const MaterialApp(      title: 'Video Player Demo',      home: VideoPlayerScreen(),    );  }}class VideoPlayerScreen extends StatefulWidget {  const VideoPlayerScreen({super.key});  @override  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();}class _VideoPlayerScreenState extends State<VideoPlayerScreen> {  late VideoPlayerController _controller;  late Future<void> _initializeVideoPlayerFuture;  @override  void initState() {    super.initState();    // Create and store the VideoPlayerController. The VideoPlayerController    // offers several different constructors to play videos from assets, files,    // or the internet.    _controller = VideoPlayerController.networkUrl(      Uri.parse(        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',      ),    );    // Initialize the controller and store the Future for later use.    _initializeVideoPlayerFuture = _controller.initialize();    // Use the controller to loop the video.    _controller.setLooping(true);  }  @override  void dispose() {    // Ensure disposing of the VideoPlayerController to free up resources.    _controller.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: const Text('Butterfly Video')),      // Use a FutureBuilder to display a loading spinner while waiting for the      // VideoPlayerController to finish initializing.      body: FutureBuilder(        future: _initializeVideoPlayerFuture,        builder: (context, snapshot) {          if (snapshot.connectionState == ConnectionState.done) {            // If the VideoPlayerController has finished initialization, use            // the data it provides to limit the aspect ratio of the video.            return AspectRatio(              aspectRatio: _controller.value.aspectRatio,              // Use the VideoPlayer widget to display the video.              child: VideoPlayer(_controller),            );          } else {            // If the VideoPlayerController is still initializing, show a            // loading spinner.            return const Center(child: CircularProgressIndicator());          }        },      ),      floatingActionButton: FloatingActionButton(        onPressed: () {          // Wrap the play or pause in a call to `setState`. This ensures the          // correct icon is shown.          setState(() {            // If the video is playing, pause it.            if (_controller.value.isPlaying) {              _controller.pause();            } else {              // If the video is paused, play it.              _controller.play();            }          });        },        // Display the correct icon depending on the state of the player.        child: Icon(          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,        ),      ),    );  }}