Implementing Video Playback Functionality with the video_player Package in Flutter

In Flutter, providing video playback functionality can significantly enhance the user experience of your application. The video_player package is a popular choice for handling video playback, supporting a variety of formats and platforms. This article will guide you through implementing video playback functionality using the video_player package in Flutter, ensuring smooth integration and comprehensive control over video playback.

What is the video_player Package?

The video_player package is a Flutter plugin that enables you to play video files from various sources, including network URLs, local files, and assets. It offers a straightforward API for controlling playback, managing the video player’s lifecycle, and displaying video content within your app.

Why Use the video_player Package?

• Cross-Platform Support: Works on Android, iOS, and web platforms.
• Versatile Source Options: Supports video playback from network URLs, local files, and assets.
• Playback Control: Provides APIs for playing, pausing, stopping, seeking, and controlling volume.
• Customizable UI: Allows you to build custom video player controls.

How to Implement Video Playback with the video_player Package in Flutter

To implement video playback functionality using the video_player package, follow these steps:

Step 1: Add the video_player Dependency

Add the video_player package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.8.1  # Use the latest version

Run flutter pub get to install the dependency.

Step 2: Import the Package

Import the video_player package in your Dart file:

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

Step 3: Initialize the VideoPlayerController

Create a VideoPlayerController and initialize it with the video source. This controller manages the video playback. You can load video from network, asset, or file. Here’s how to initialize a VideoPlayerController from a network URL:

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State {
  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(() {
              if (_controller.value.isPlaying) {
                _controller.pause();
              } else {
                _controller.play();
              }
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

Key aspects of the initialization:

• Video Source: The VideoPlayerController.networkUrl method initializes the controller with a video from a network URL. You can replace this with VideoPlayerController.asset for assets or VideoPlayerController.file for local files.
• Initialization: The initialize() method loads the video and prepares it for playback. The then() block ensures that the UI is updated after the video is loaded.

Step 4: Display the Video

Use the VideoPlayer widget to display the video in your UI. The AspectRatio widget ensures that the video maintains its aspect ratio. In the code snippet, a ternary operator checks if the video is initialized before displaying it to avoid errors.

body: Center(
  child: _controller.value.isInitialized
    ? AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      )
    : Container(),
),

Step 5: Add Playback Controls

Implement playback controls to allow users to play, pause, and control the video. In the provided example, a FloatingActionButton is used to toggle between play and pause. The state of the button is updated based on whether the video is currently playing.

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

Step 6: Clean Up Resources

Always dispose of the VideoPlayerController in the dispose() method to release resources. This is crucial to prevent memory leaks.

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

Complete Example

Here’s the complete code example that combines all the steps above:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State {
  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(() {
              if (_controller.value.isPlaying) {
                _controller.pause();
              } else {
                _controller.play();
              }
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

Additional Features

Volume Control

You can adjust the video volume using the setVolume method:

_controller.setVolume(0.5); // Sets volume to 50%

Seeking

You can seek to a specific position in the video using the seekTo method:

_controller.seekTo(Duration(seconds: 30)); // Seeks to 30 seconds

Looping

To loop the video, set the setLooping property to true:

_controller.setLooping(true);

Conclusion

Implementing video playback functionality with the video_player package in Flutter is straightforward and provides a solid foundation for creating rich multimedia experiences. By following the steps outlined in this article, you can easily integrate video playback into your Flutter applications, control playback, and customize the UI. The video_player package simplifies video management and ensures cross-platform compatibility, making it an excellent choice for Flutter developers. Always remember to properly dispose of the VideoPlayerController to avoid memory leaks and ensure efficient resource management.