A Complete Guide on Implementing Video in Flutter Apps

‍

Streamlined Video Integration in Flutter Apps

With the advent of modern app development, displaying videos is becoming increasingly required. Flutter apps aren't an exception. For implementing video playback, the development team at Flutter offers the video_player plugin, a beneficial tool that offers developers the ability to incorporate videos from various sources - whether they are stored on the file system, bundled in as an asset, or retrieved from the internet.

The Flutter video player has nuanced implementations depending on the device platform. For iOS, it leverages the AVPlayer to handle playback, while, on Android, it makes use of ExoPlayer. In this guide, we'll delve into and discuss the Flutter video player's basic features, providing a step-by-step approach to stream a video over the internet, with simple play and pause controls.

‍

Setting Up the Flutter Environment

Before we kickstart our journey into Flutter's video world, it's essential to first set up the Flutter environment for video playback.

‍

Adding the Flutter Package

To work with Flutter video, first add the video_player plugin as a dependency in your project. You can do this by running the flutter pub add command as follows:

flutter pub add video_player

The command above tells flutter to find and download the video player resources, along with other Flutter packages required for the app.

‍

Granting Permissions

Next up, let's configure our Android and iOS settings by adding the necessary permissions to stream videos from the internet.

‍

Android Configurations

Open the AndroidManifest.xml file situated in <project root>/android/app/src/main/. Add the permission just after the <application> definition.

<manifest xmlns:android="<http://schemas.android.com/apk/res/android>">
    <application ...>

    </application>

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

‍

iOS Configurations

For iOS, make the changes in the Info.plist file found at <project root>/ios/Runner/.

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

‍

Stream Your First Video in Flutter

Playing videos in Flutter entails creating and initializing a VideoPlayerController. This nifty controller establishes a connection with the video and prepares it for playback.

‍

Creating and initializing a VideoPlayerController

In this section, we'll build a StatefulWidget that stores a VideoPlayerController and the Future returned by VideoPlayerController.initialize. We'll initialize the controller in the initState method and dispose of it in the dispose method.

To do this, we will create a StatefulWidget VideoPlayerScreen and a companion VideoPlayerScreenState State class. Inside VideoPlayerScreenState, we'll define a VideoPlayerController and a Future object that calls our initialize method. In initState we define our controller and the _initializeVideoPlayerFuture. In dispose, we ensure that we dispose of the controller to free up resources.

Here's the appropriate Dart code for the setup:

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();

    _controller = VideoPlayerController.networkUrl(
      Uri.parse(
        '<https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4>',
      ),
    );

    _initializeVideoPlayerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

‍

Displaying Video Content

Now that we've initialized the VideoPlayerController, it's time to display our video content. Flutter provides a VideoPlayer widget to show the video from our controller. By default, this widget expands as much as possible, which might not be ideal for maintaining the aspect ratio of a video.

To remedy this, we pair it with an AspectRatio widget to ensure our video content maintains the proper proportions.

Let's see how we can create a UI for our video player:

FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      );
    } else {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  },
);

In this example, a FutureBuilder is used to display a loading spinner while we wait for the VideoPlayerController to finish initialization.

‍

Control your Video Playback

Now that we are playing videos in our Flutter app, let's explore how we can control our video playback.

‍

Play and Pause Interactions

By default, a video starts in a paused state when loaded. We can facilitate video playback by employing the play method provided by the VideoPlayerController. Likewise, the pause method is used to pause the video.

Let's add a FloatingActionButton to our app that displays an icon based on the current playback state of our video. This button will also act as our play/pause control, allowing the user to toggle video playback at their convenience.

Here is how to implement the play and pause functions:

FloatingActionButton(
  onPressed: () {
    setState(() {
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        _controller.play();
      }
    });
  },
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

In this FloatingActionButton, we have set the onPressed function to call play or pause based on the current playback state. By wrapping play or pause with a setState, we ensure that the correct icon is shown, with a pause icon when playing and a play icon when paused.

‍

Complete Example

Now, let's assemble all the bits and pieces we've discussed so far and create a video player demo program. This program includes a StatefulWidget, a VideoPlayerController, aspectRatio widgets display, and finally, a play-pause FloatingActionButton.

Setting up and controlling video playback in Flutter is an exhilarating experience, isn't it? This is all because of the power of Flutter and Dart software development. In a nutshell, this easy to read and understand example encapsulates the topics we've discussed about controlling video playback.

‍

Expanding Your Video Playback Capabilities

Flutter doesn't limit you to just playing, pausing, and displaying videos. With the power of the VideoPlayerController, you can control various other aspects such as volume, playback speed, and even display subtitled content or live streaming videos! Furthermore, Flutter allows more granular control that gives the user a smooth and intuitive video consumption experience, accentuating the user interaction within your app.

‍

Improving the User Experience with Advanced Controls

By using other handy methods provided by VideoPlayerController, you can:

Loop the video: By setting controller.setLooping(true), your video will automatically replay once it has ended.
Speed up or Slow Down the video: The setPlaybackSpeed method allows you to speed up or slow down a video.
Jump to a specific time: seekTo provides a way to skip to a specific part of the video.

These additional controls add a new dimension to the user experience, which might be useful depending on your app requirements. You have a powerful tool at your disposal to deliver a user-friendly, highly customizable video experience within your Flutter applications.

‍

Error Handling in Video Playback

As developers, we know that things don't always go as planned. There could be various issues when dealing with video playback runs, and it's crucial to account for these potential problems and handle them gracefully.

‍

Handling Video Playback Errors

The VideoPlayerController has an onError callback which is triggered when an error occurs during video playback. You can customize this callback to display a custom error message or perform specific actions depending on the type of error.

_controller = VideoPlayerController.networkUrl(
  Uri.parse('<https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4>'),
)..initialize().catchError((error) {
    // Handle error
    print("Error loading video : $error");
});

In the Dart code snippet above, any error during video initialization triggers the catchError method, which will print the error. You can customize this block to handle errors as per your app's requirements.

‍

Making the Most of Flutter's VideoPlayer Plugin

There are multiple ways Flutter allows you to enhance the video experience for your users further. For instance, you can create a fullscreen video player or even build your own custom video player widget with its unique controls.

‍

Building a Full Screen Video Player

If your app's nature demands more space to play videos, going full screen can be the perfect solution. You can use the Flexible widget in combination with SystemChrome.setPreferredOrientations to create a more immersive and engaging video player experience in Flutter.

‍

Advanced Video Features in Flutter

With Flutter, you don't have to be confined to the default video player controls. You have the flexibility to build your widget for user interaction with the video. Depending on your application, you may want to incorporate unique features or control designs, such as tap to mute, double tap to fullscreen, swipe for playback speed control, and more.

‍

Performance Considerations

Delivering a smooth video playback experience is crucial for user satisfaction. In the world of app development, especially with media-rich applications, there are several performance factors to keep in mind.

‍

Video Loading and Buffering

To ensure that the videos don't start with a buffering screen, you can pre-buffer the videos if they fit well within memory limits. The video player plugin also provides callbacks like bufferingStart and bufferingEnd to customize the user interface during buffering times.

‍

Memory and Bandwidth

For apps that are highly reliant on videos, controlling memory usage and bandwidth consumption becomes crucial. You can control these aspects by adjusting the video quality, implementing video compression and optimization techniques, loading videos over efficient networking protocols, and managing app resources effectively.

‍

Debugging and Testing Video Playback

As with any feature in app development, it's crucial to thoroughly test video playback to ensure a smooth user experience. Moreover, knowing how to debug issues is essential when dealing with rich media like videos in Flutter.

‍

Debugging Video Playback

When a video doesn't play as expected, you can use various strategies to debug the issues. The video_player plugin's value property provides a wealth of information that can help in debugging. You can view details such as the video's duration, current playback position, buffering status, error description, and more.

In addition to this, Flutter offers sophisticated debugging tools that help in diagnosing other potential issues, such as UI layout problems, performance issues, and more.

‍

Testing Video Playback

In Flutter, you can perform unit tests on your video-related widgets and classes to ensure they work as expected. Widget testing allows you to create a test widget, pump it into the widget tree, and then interact with it as a user would.

It's good practice to test all edge case scenarios with your video player, including screen rotation changes, network connectivity changes, and other aspects to ensure a seamless user experience.

‍

Conclusion

By now, you should have a solid understanding of the capabilities of the VideoPlayer plugin in Flutter. We've examined how to integrate and control video playback, add advanced video features, handle video errors, and even delve into performance considerations.

Whether you're developing a social media app, an online learning platform, or any application that uses video, Flutter's versatility and ease of use make it easier to provide an enriching, interactive, and seamless video experience to your users. With Flutter, delivering top-notch video experiences is straightforward and within the grasp of every developer.

Flutter

React

Android

iOS

Node.js

Plugin

Templates

Screen Library

About Us

Career

Contact Us

Documention

Discord

Blogs

Webflow

Airtable

Notion

Chargebee

Freshteam

Spotify

Slack

Google Sheets

Bringing Motion to Life: A Complete Guide on Implementing Video in Flutter Apps

Nidhi Sorathiya