Chewie Flutter Video Player Example
In this article, we are going to learn how to use chewie flutter package to play videos in flutter applications. We already used flutter video player to play videos without playback controls in flutter applications.
Flutter Video Player does not provide any video playback related controls. So if we use it, we need to add controls and style it according to our requirements. This package uses AVPlayer for iOS applications and ExoPlayer for android applications.
Using chewie flutter package, we can create custom playback controls to manage videos according to our specific requirements. We can also make different UIs for android and iOS platforms. So in this example, we are using both libraries chewie and video player to play and manage videos.
Chewie flutter package provides different functionalities such as mute and unmute, video speed, autoplay, video controls etc. Using this package, we can play videos from three sources : network, assets and file.
Add required dependencies in our pubspec.yaml file
video_player: ^2.1.1
Android Platform Changes for Chewie Flutter
If we play video from network, we need to add internet permission in AndroidManifest.xml file.
If you are using http url instead of https and your device is running on api level 28 then you are getting “Cleartext HTTP traffic not permitted” error. To prevent this error, you need to add following line in application tag in AndroidManifest.xml file.
iOS Platform Changes for Chewie Flutter
Same as android, we need to add keys in Info.plist file to play network videos in iOS applications. Add following keys in /ios/Runner/Info.plist file.
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Create and Initialize VideoPlayerController
Using VideoPlayerController, we can define video source from which we can play video : asset, file or network. Here we define video url to play video from network. ChewieController has different attributes. First we can add our video player controller object.
autoplay attribute is used to play video automatically as it is displayed. looping attribute is used to play video over and over again. We can also use aspect ratio attribute for more customization in ChewieController class.
ChewieController chewieController;
@override
void initState() {
super.initState();
initializeVideoPlayer();
}
Future<void> initializeVideoPlayer() async {
videoPlayerController = VideoPlayerController.network(‘https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-529-large.mp4’);
await Future.wait([
videoPlayerController.initialize()
]);
chewieController = ChewieController(
videoPlayerController: videoPlayerController,
autoPlay: true,
looping: true,
);
Flutter Video Player UI
child: Center(
child: chewieController != null &&
chewieController.videoPlayerController.value.isInitialized
? Chewie(
controller: chewieController,
)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircularProgressIndicator(),
SizedBox(height: 20),
Text(‘Loading’),
],
),
),
)
Dispose Controllers
void dispose() {
videoPlayerController.dispose();
chewieController.dispose();
super.dispose();
}
Pingback: YouTube Embed Player in Flutter - CodingWithDhrumil
Pingback: Flutter Video Player Example - CodingWithDhrumil