Flutter Video Player Tutorial | (Assets, URLs, & Gallery/Photo Library) File Video Streaming Guide

in today's video I'm going to be showing you how to play video files within your favorite application not only that I'm also going to be showing you how you can add custom controls on top of your video player so that you can play and pause the video scrub through the video feed as well as adjust the playback speed and we're also going to be taking a look at how to load video from different resources such as asset files or Network videos and then display them on device so if this sounds good to you let's get into the video so the first thing that we're going to be tackling is making sure that you and I are at the same starting position to do that just initialize an empty filter project and then you and I are basically at the same starting position so once that is done the first thing that I'll do is that I'm going to be basically setting up my project so to do that I'm going to go to the main.fly and I'll remove the my home page State class as well as the corresponding my home page class and then after that I am going to go to my lib folder I'm going to create a new folder I'm going to call this pages and within Pages I'm going to create a new file which I'm going to call video underscore player underscore page dot Dart then this file is going to consist of a stateful widget which is going to be the widget which is going to be responsible for our video player page so I'm going to call this video player page and this will consist of all of the logic required for this tutorial once this is done I'm going to come to the builds function for the video player page State and I'm going to say that this is going to return a scaffold I'm going to do command save close down this file come back to main.dart and then for the material apps to build the function's home property I'm going to say that I'm going to return our video player page now like so then do command save once this is done you should see that the hot reload would do its magic and you should see the changes reflected on the device and now we can move on to the next step so the next step is figuring out what type of a package we're going to be using to display videos with an offline application for that we're going to be using a package called appino video player which is a very powerful video player which takes the default official video player that flutter gives us and then adds a lot of powerful features on top of it and tools allowing us to have much more glandular control over how we interact with the video files and how those are displayed to the user so this is an excellent package that I recommend for displaying video files within your flutter application so to get started you can just copy this dependency come back to your pubspect.aml file and then what you can do from here is that you can basically go to the dependencies section and paste the epino video player dependency here once this is done you can stop running the application and let a Pinot video player get downloaded into the project and while this happens I'm going to let you know that the first thing that we're going to be tackling is showcasing how to run acid video files within your flutter application so for that what you can do is that you can create an assets folder within your flutter application so I'm going to create a new folder called assets and then underneath the fastest I'm going to create a new folder called videos and then underneath of that I'm going to be adding the file which I want to basically display on device so what I'm going to be doing for this is that I'm going to be getting a file that I have on my system I'm going to let you know of the website where I downloaded this from so under assets videos I have vail.mp4 and this file I actually got from a very cool website that I read recommend you take a look at it's called pexels.com and you can get free stock videos and photos from here so you just select the videos here and then you can type in a topic such as will and it spits out a bunch of real videos to you so now coming back we have our asset video in place and we have the appino video player package installed so the last thing that I'm going to be doing in my pubspec.yaml file is letting flutter know that it needs to load these assets and make them available to the flutter application so to do that I'll come down into my pubspect.aml file locate the assets section uncomment this line and then after this what I'm going to be doing is uncommenting the next line as well and then from here I'm going to say that under the asset slash videos folder I want to make everything available to my flutter application now that this is done we can actually come back to main.dart and start debugging the application I'm going to let this application build and once it starts running on my simulator I'll resume the video Welcome Back everybody so now that the application is running on our device we can actually take a look at how to work with the video player so the way this video player works is that we need to initialize a video player widget and then we need to pass a controller to it this controller is the first thing that we're going to be tackling so what I'm I'm going to be doing is that I'm going to go to my video players page and then from here I'm going to go to the video player page State class and I'm going to create a variable here which is going to store a reference to our custom video player so to do that I'm going to say that we're going to have a layered variable it's going to be custom video player controller and then I'm going to say this is going to be underscore custom video player controller once this is done what I'm going to be doing is that I'm going to be creating the init State function within my video player page State class so this function is called every time the widget gets initialized and then what I'm going to be doing is that I'm going to be creating a function which I'm going to be calling initialize video player and I'm going to save that for now it's going to take no arguments later on it will something and then this is the actual function where we're going to be initializing our video player so the appino video player basically requires a video player controller that needs to get passed to it and this is the custom video player controller so I know this sounds confusing but I'll just become clear in just a bit so what we're basically going to be doing is that we're going to be creating a video player controller and this is going to provide the base controller which we need to basically work with videos and for the custom video player controller I'm going to say this is going to be called video player controller and I'm going to say that for now it's going to be nothing then I'm gonna say that we're going to set our video player controller to be equal to a new instance of our video player controller and then we need to Define where we're going to be getting our video file from so we can get it from a file this means basically files on our device not asset files we can get it from a network URL that's another thing and we can get it from an asset so what we're going to be doing is that we're going to be loading the video file from an asset so I'll do video playercontroller.acid and then Define the actual path to the video file so I'm going to go to the top of my video player State class I'm going to add a new variable here called asset video path and then I'll pass this to my asset function and then I'm going to say that we're going to initialize this video player controller and once this is initialized then what I'm going to be doing is that I'm going to be calling a function and within this function we are going to be doing something later on but for now what I want you to do is basically leave this empty and move on to the next step which is to actually create take our custom video video player controller variable and set that equal to a new instance of custom video player controller and then it requires access to the context as well as the video player controller which is this one that we've now initialized and then we just pass it here so what the custom video controller does is that it takes the video player controller and it adds a lot of custom functionality on top of it such as the ability to play and pause the video scrub through the video feed adjust the playback speed so without this custom video player controller even though our video player is going to work it's not going to have that functionality built into it and we can take this custom video player control and we can manipulate a lot of other attributes about it to change the way maybe those buttons look or maybe add new features and a whole bunch of other things so I recommend that from an advanced usage you actually take a look at the documentation on the pub.dev page for a Pinot video player so now that our video player is initialized what I'm going to be doing is that after this I'm going to be saying that we are basically going to be calling the set State function here within this function once the video player gets initialized I'm going to say set State like this to hold shift F command save and we're good to go so now that this is done I'm going to go to my scaffold I'm going to select the child or the body attribute for this and then for the body attribute for my scaffold I'm gonna say that I'm gonna basically create the custom video player like so and then it requires access to the custom video player controller which we already have and also do this I'll shift F command save and it says that the custom video player has not been initialized so I'm gonna reload welcome back everybody so while we were coding up the logic for initializing our video player I found out that we forgot to actually add the call to the function initialize video player within our init State function so I'll do that and then I'll restart my application and hopefully this time we shouldn't get there and the video player should load up so now I can press on the play button here on our video player and we have the functionality to play the video field through the power of the custom video player controller we have on-screen buttons which gave us the functionality to scrub through the video feed change the view to full screen mode as you can see and then we can also using this clock button here adjust the playback speed and then the custom video player controller has a lot of other features that you can enable or disable and I'll recommend that you take a look at the documentation to understand those so now that we have this then I want to work on the styling of this UI and basically allow the user to have buttons displayed on the screen allowing them to switch between showing either a video from the assets or from the network so to get started for that what I'll do is that I'll come to my build function custom video player controller I'm going to refactor this and I'm going to put this within a column then I'm going to say that for my column my main axis alignment is going to be main X alignment.center for across I'll do the same thing so cross-axis alignment Dot Center and then for the main axis as I'll do main exercise.max to command save now the video player is in the middle and once this is done the next thing that I'm going to be doing is that I'm going to be defining a function underneath of my build function which will return a widget I'm going to say that this is going to be called Source buttons and source button basically means that these buttons will determine the source from which the video is loaded and then they're not going to be taking anything within them I'm going to say that we're going to return a rule this role is going to have a children's property and children here are just going to be material buttons so what I'm going to be doing is that I will just copy this code in I'll paste it in here and then I'm going to remove everything that's within on pressed so it's just basically a simple material button like so and then what I'll do is that I will take the source buttons function call and after my custom video player controller I'll call The Source buttons function like so do command save and now we have the network function suing then for my row to adjust the styling I'll say that for me and access alignment I'll do main access alignment dot space evenly and then I'm going to say that for the cross axis alignment just Center them and then for the main axis size let's do Main exercise.max and that's pretty much it then I'll just copy this piece of code I'll paste it again and this time I have another button which is not going to be network but acid like so so now that we have our button set up I want to switch between these two video sources on the click of a button so to do this what I'll do is that I'm going to firstly go to the top of my file I'm going to create an enum here which stands for enumeration and I'm going to say this is going to be Source this is completely optional you could have used the Bool as well but this is a good way of doing things and I'm going to say that the First Source is going to be an asset and another source that something could be would be Network like so into command save then what I'm going to do is that I'm going to come back to my video player State class and here I'm going to say that we are going to have a variable which will keep track of our source so for that I'll say that I'm going to create a variable which will be of type source and I'm going to say that this is going to be current source and the source like so and this is going to be equal to when the actual video player paid page state gets initialized equal to the default value of source.assic so the when like so and do command save then once we have this defined the next thing that I'm going to be doing is that I'm going to be coming down Source buttons function I'm going to say when the network button is clicked I want to basically set the state and I'm going to set the state to be our current Source equal to Source dot asset or network sorry like so and then what I'm going to do is that I'm going to copy this and I'm going to go to the next on press button function call for asset and this I'm going to say that we're going to do current Source asset like so do command C so now when the buttons get clicked our current Source gets changes to something else and then since we're connect set State the UI gets rebuilt once this is done now what I'm going to be doing is that I am basically going to be then calling the initialize video player function again so I'll say that we set the state and we call the initialize video player function again like so and I'm going to do the same thing here as well and then within my initialized video player function I'm going to say that when we call the initialize video player function we need to pass it a source like so and then what I'm going to be doing is that now I'm going to be defining some logic to determine what type of a video player we need to initialize so what I'm going to be doing is that I'm going to let the video player controller variable be set up and then I'm going to say that I'm going to say if the source that gets passed to us is equals to source.asset um then what I'm going to be doing is that I'm going to be running the logic that is here so this video player controller like so and if else if the source is equals to source.network then I'm going to be running some logic else if this is not the case I'll just return from my function and then what I'm going to be doing is that I'm going to saying that in this elsif Clause I'm going to do video player controllers same way I'm going to say video player controller Dot from Network URL and then I'm going to pass a URL here and then what I'm going to be doing is that I'm going to say that once this URL is passed we will initialize our video player controller and then I'm gonna do the then so once the video player is initialized I want to call this callback function which for now does nothing except for calling the set status function the same way we do for our asset video player controller so do command save and now we are good to go so now that this is done we need to define the network URL so for that as you can see it expects a URI parameter so what I'm going to be doing is that I'm going to go to the very top and I'm gonna before the asset video I'm going to create a URI variable I'm going to say that this is going to be video URL and I'm going to be setting it equal to a video URL from the same file that's provided to us as a demo file on the apino video player controllers demo code which is here just make sure that you change the http protocol here to https um also it's not going to work so this is the same URL it's just https instead of HTTP and then what you're going to be doing is that you're just going to say URI and then after this we're going to say dot parse and you're going to pass it this string like so and this will basically take this URL in the string form and it will parse it and convert it into a URI object to command save and then this take this video URI and I should say URI or URL and then go down to where you have your initialized video player controller Network URL and give it the video URI once this is done you can come back to the top to the init State function and we're just fixing some errors now so for our initialize video player once it initially gets initialized I'm going to pass it the current Source like so and then in the source buttons I'm going to do the same thing which is here I'm going to pass the current source and then here I'm going to pass the current source and do command C so hopefully now I'm gonna restart my application just to make sure that we're on a green slate and you're going to see that the acid video loads up if I click on network now you're gonna see that the video feed disappears it takes some times to load the new video feed from the network and then now if I start playing it now we're playing the video feed from that URL and you're noticing that there is a slight delay between when we click on the button and what the UI appears as you can see here as well so it takes a bit of sign for the system to actually retrieve the data depending upon where we're getting it from the network or asset files or something like that so we're just going to be doing one last thing to fix that and adding a loading indicator so adding a loading indicator is going to be very easy the first thing that I'm going to do is that I'm going to go to the top of my state class I'm going to say that I'm going to have a lead pool and I'm going to call this to be is loading like so and then I'm gonna say that I'm going to be basically taking this and I'm gonna say that in my build folder if is loading then we're going to be showing some other variable else we'll show the column so if it's loading we'll show some kind of another widget if it's not this is called the tertiary statement we'll share column and here I'm going to say that we are basically going to now paste say we're going to have a center widget which will have a child and the child will be a circular progress indicator with a color of colors.red and then do command save and I'm going to also say that we can basically do const here um and I'm going to say Bool is loading um the default value for this is going to be true like so um and then I'm gonna restart my application make sure that nothing is broken as you can see now the loading indicator is showing to us because it's just true and we're not changing the state of it so now I'll go back to my initialized video player function at the very start of this function I'll call the set State function and I'll say that is loading is going to be set to True like so and then once our video player gets initialized here then what we do is that within this set State function we set is loading two false and I'll do the same thing here as well to command save reload our application and I'm gonna see that we click an asset the video player circular progress controller happened once it's initialized we see the video player click on network we see the loading indicator once the video is available to us we see the UI again given to us so now that the UI is completely working the last thing that I'm going to be doing is telling you guys that if you need access to the source code then you can find that link down in the description below and it's on my patreon so you can support me there and you'll have access to a lot of cool tutorials that I post on patreon as well as well as source code to all of the tutorials that I make not only on YouTube but on patreon as well things that we used within this tutorial I'm going to leave link to all of those resources well down in the description one last thing that I'd like to tell you is that as a good memory management step within our video player paid State class once that widget gets disposed the dispose function gets called so we are going to overwrite that and once the dispose function calls before super.dispose this call I'm going to take our custom video player controller and I'm going to dispose that as well and do command save and that's pretty much it so with that said I hope that you enjoyed today's tutorial if you did then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I upload a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video

Channel: Hussain Mustafa

Views: 3,500

Keywords: flutter video player, flutter video player with controls, flutter video player from url, flutter video streaming app, flutter video player app, video player flutter, video player flutter full screen, video player flutter github, flutter ios video player, flutter android video player, appinio video player, best video player flutter, video player flutter app, stream video flutter, flutter video player youtube, flutter chewie, flutter chewie custom controls, flutter tutorial

Id: 5-bazfNa9bc

Length: 20min 16sec (1216 seconds)

Published: Sun Sep 24 2023