Video Player In Flutter
Videos are everywhere — they can pass on data more rapidly than some other arrangement. From YouTube and Instagram stories to application development courses, playing videos straightforwardly inside your application is getting increasingly required.
How could play videos in Flutter? There is a library straightforwardly from the Flutter group just called video_player.
video_player | Flutter Package
A Flutter plugin for iOS, Android, and Web for playing back video on a Widget surface. Note: This plugin is still under…pub.dev
This library, nonetheless, is totally no frills. While it can play videos, it’s dependent upon you to add video playback controls and style it. There is a superior alternative that comes packaged with the UI, as you’d expect both on Android and iOS is Chewie.
chewie | Flutter Package
A video player for Flutter with Cupertino and Material play controlspub.dev
In this article, we will explore the Video Player In Flutter. We will also implement a demo program and use the chewie to play videos using the chewie and video_player package in your flutter applications.
Table Of Contents::
Introduction:
Chewie and video_player can play videos from three sources — assets, files, and network. Its excellence is that you don’t have to compose a ton of code to change the information source. Switching from an asset for a network video involves only a couple of keystrokes.
Demo Module ::
This demo video shows how to play videos in a flutter and shows how video player will work using the chewie and video_player package in your flutter applications, and also show video will autoplay, video speed, video controls, mute and unmute video, etc. they will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
chewie:
video_player:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
assets:
- assets/
Step 3: Import
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Add the internet permission
Add this to your project root>/android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"/>
Step 6: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called video_items.dart inside the lib folder.
Presently comes an opportunity to begin playing videos. For that, Chewie gives its own widget, which is, as I’ve just referenced, just a covering on top of the VideoPlayer, which comes straightforwardly from the Flutter group.
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}
We should provide a chewie controller. We need to play various videos showed in a ListView; it will be ideal for putting the entirety of the video-playing-related things into its own widget because video player resources should be delivered.
Now we will create a three constructor a VideoPlayerController, looping, and autoplay.
final VideoPlayerController videoPlayerController;
final bool looping;
final bool autoplay;
VideoItems({
@required this.videoPlayerController,
this.looping, this.autoplay,
Key key,
}) : super(key: key);
We will add “_chewieController” in initState(). In ChewieController, we will add videoPlayerController its means “the controller for the video you want to play,” aspect ratio means“ the size of the video you want,” autoInitialize means “initialize the Video on Startup. This will prep the video for playback”, autoPlay means “play the video as soon as it’s displayed,” looping means “whether or not the video should loop,” errorBuilder means “when the video playback runs into an error, you can build a custom error message.”
@override
void initState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio:5/8,
autoInitialize: true,
autoPlay: widget.autoplay,
looping: widget.looping,
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
We need to create a StatefulWidget to get hold of the dispose() method.
@override
void dispose() {
super.dispose();
_chewieController.dispose();
}
Create a new dart file called home_screen.dart inside the lib folder.
We will call VideoItems() in home_screen file. We will add a video file from assets and add looping, autoplay for video.
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_6.mp4',
),
looping: true,
autoplay: true,
),
We will add a video file from the network, and also, when the URL doesn’t exist will display an error.
VideoItems(
videoPlayerController: VideoPlayerController.network(
'https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4'
),
looping: false,
autoplay: true,
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_video_player_demo/video_items.dart';
import 'package:video_player/video_player.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Video Player Demo'),
centerTitle: true,
),
body: ListView(
children: <Widget>[
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_6.mp4',
),
looping: true,
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.network(
'https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4'
),
looping: false,
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_3.mp4',
),
looping: false,
autoplay: false,
),
VideoItems(
videoPlayerController: VideoPlayerController.asset(
'assets/video_2.mp4',
),
autoplay: true,
),
VideoItems(
videoPlayerController: VideoPlayerController.network(
"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
),
looping: true,
autoplay: false,
),
],
),
);
}
}
Conclusion:
In the article, I have explained the video Player’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Video Player On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Video Player in your flutter projects. We will show you that Chewie is a Flutter package pointed toward simplifying the way toward playing videos. Rather than managing a start, stop, and pause button, doing the overlay to show the video’s advancement, Chewie does these things for you and make a demo program for working video player in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Video Player Demo:
flutter-devs/flutter_video_player_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
