Flutter – Handling videos

A video is an important form of media that can be used in the application. In Flutter, videos are handled through the use of video_player plugin. This performs tasks like playing a video, pausing a video, or muting the same. It can be used to play videos from the internet or the videos stored in the assets of the application. In this article, we will explore the same in detail through an example application.

To build a simple app that can play videos using the below steps:

  • Add the video_player dependency to pubspec.yaml file.
  • Give the application permissions to access videos.
  • Add a VideoPlayerController
  • Display & play the video.

Now, let’s explore these steps in detail.

Adding video_player plugin:

To add the video_player plugin to the flutter app, open the pubspec.yaml file and add the video_palyer dependency as shown below:

plugin



Giving Permissions:

To stream videos from the internet the app will be needing correct set of configuration. Depending upon the OS of the device we can set the permissions as shown below.

Android:

For Android devices, the permission to stream videos from the internet can be added by going into the Androidmanifest.xml file at 

<project root>/android/app/src/main/AndroidManifest.xml. And add the below lines write after the <application> definition :

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
    Defination of the Flutter Application....
    </application>

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

iOS:

For iOS devices, the permissions can be given by adding the following to the Info.plist file which is located at <project root>/ios/Runner/Info.plist as shown:

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

Adding VideoPlayerController:

The VideoPlayerController facilitates the video playback and control of the video. It establishes the connection to the video and prepare the controller for playback. The Controller that we will be creating here will be a StatefulWidget with a state class. We will initialize the controller using the initState method as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
  
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  
  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'Video_URL',
    );
  
    _initializeVideoPlayerFuture = _controller.initialize();
  
    super.initState();
  }
  
  @override
  void dispose() {
    _controller.dispose();
  
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
  }
}

chevron_right


Displaying & Playing the video:

The VideoPlayer widget from the video_player plugin is used in flutter to display a video. To control the Aspect ratio of the video, we will wrap it inside a AspectRatio Widget. We will also be adding a FloatingActionButton to control the play and pause of the video as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      );
    } else {
      return Center(child: CircularProgressIndicator());
    }
  },
)
FloatingActionButton(
  onPressed: () {
    setState(() {
      //pause
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // play
        _controller.play();
      }
    });
  },
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'dart:async';
  
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
  
void main() => runApp(VideoPlayerApp());
  
class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      home: VideoPlayerScreen(),
    );
  }
}
  
class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);
  
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
  
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  
  @override
  void initState() {
    _controller = VideoPlayerController.network(
    );
    _initializeVideoPlayerFuture = _controller.initialize();
  
    _controller.setLooping(true);
  
    super.initState();
  }
  
  @override
  void dispose() {
    _controller.dispose();
  
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // pause
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // play
              _controller.play();
            }
          });
        },
        // icon
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.