How to Solve the Video Player Crashing Issue in Flutter.

 

In this tutorial, we are going to solve a problem one of our members from the technical team had to encounter while developing an application using flutter. Before getting into the details of the problem and how to solve it we will first give a little intro about flutter.

 

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase. 

Videos are everywhere – they can convey information more quickly than any other format. From YouTube and Instagram stories to app development courses, playing videos directly inside your app is becoming more and more needed.

How can we play videos in Flutter? There is a library directly from the Flutter team simply called video_player. This library, however, is completely bare-bones. The library built by flutter crashes and causes many errors during the execution of any application.  While it can play videos, it’s up to you to add video playback controls and to style it.

Here is a better option that comes bundled with the UI as you’d expect both on Android and iOS – Chewie. Chewie uses the first-party video_player package behind the scenes. It only simplifies the process of video playback. This library acts as a wrapper and provides low-level access to video playback.

Project Setup

The video_player plugin, which is natively supported in the flutter, provides access to low-level video playback functionality.

For iOS, the video_player plugin uses AVPlayer to play videos. And for Android it uses ExoPlayer.

Using the video_player plugin, it is possible to play videos stored on the network, in the application as well as directly in the phone’s storage.

Importing packages 

For Android

In your pubspec.yaml file within your Flutter Project define this library:

dependencies:

  chewie: <latest_version>

  video_player: <latest_version>

For IOS

To be able to play network videos, you need to tell iOS about your intentions of loading network data. A similar setup is also required for Android, but when you create a new app through the flutter create command, all the needed permissions are done for you.

Open <your_project>/ios/Runner/Info.plist and add the following code.

 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">

<dict>

    ...

    <key>NSAppTransportSecurity</key>

    <dict>

        <key>NSAllowsArbitraryLoads</key>

        <true/>

    </dict>

</dict>

</plist>

 

Chewie can play videos from three sources: assets, files, and network. You don’t need to write a lot of code to change the data source. Switching from an asset to a network video is a matter of just a few keystrokes. Let’s first take a look at assets.

Asset videos setup

Assets are simply files that are readily available for your app to use. They come bundled together with your app file after you build it for release.

To set up assets, simply create a folder at the root of your project and call it, for example, videos. Then drag your desired video file in there.

To let Flutter know about all the available assets, you have to specify them in the pubspec file.

pubspec.yaml

flutter:

  uses-material-design: true

  assets:

   - videos/IntroVideo.mp4

Using the widget

Now we will start playing videos. For that Chewie provides its widget which is only a wrapper on top of the VideoPlayer which comes directly from the Flutter.

We want to play multiple videos displayed in a ListView, it’s going to be best to put all of the video-playing-related things into its widget. Also, because video player resources need to be released, you need to create a StatefulWidget to get hold of the dispose() method.

Chewie_list_item.dart

import 'package:chewie/chewie.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class ChewieListItem extends StatefulWidget {

  // This will contain the URL/asset path which we want to play

  final VideoPlayerController videoPlayerController;

  final bool looping;

  ChewieListItem({

    @required this.videoPlayerController,

    this.looping,

    Key key,

  }) : super(key: key);

  @override

  _ChewieListItemState createState() => _ChewieListItemState();

}

class _ChewieListItemState extends State {

  ChewieController _chewieController;

  @override

  void initState() {

    super.initState();

    // Wrapper on top of the videoPlayerController

    _chewieController = ChewieController(

      videoPlayerController: widget.videoPlayerController,

      aspectRatio: 16 / 9,

      // Prepare the video to be played and display the first frame

      autoInitialize: true,

      looping: widget.looping,

      // Errors can occur for example when trying to play a video

      // from a non-existent URL

      errorBuilder: (context, errorMessage) {

        return Center(

          child: Text(

            errorMessage,

            style: TextStyle(color: Colors.white),

          ),

        );

      },

    );

  }

  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: const EdgeInsets.all(8.0),

      child: Chewie(

        controller: _chewieController,

      ),

    );

  }

  @override

  void dispose() {

    super.dispose();

    // IMPORTANT to dispose of all the used resources

    widget.videoPlayerController.dispose();

    _chewieController.dispose();

  }

}

Play the Videos

To play the videos in listview all you have to do is create a page named “mypage”.

Main. dart

import 'package:chewie_prep/chewie_list_item.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      page: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Video Player'),

      ),

      body: ListView(

        children: [

          ChewieListItem(

            videoPlayerController: VideoPlayerController.asset(

              'videos/IntroVideo.mp4',

            ),

            looping: true,

          ),

          ChewieListItem(

            videoPlayerController: VideoPlayerController.network(

              'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/table.mp4',

            ),

          ),

          ChewieListItem(

            // This URL doesn't exist - will display an error

            videoPlayerController: VideoPlayerController.network(

           'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/error.mp4',

            ),

          ),

        ],

      ),

    );

  }

}

Chewie is a Flutter package used for simplifying the process of playing videos. We hope you find this tutorial helpful. Let us know in the comments section! K2 blocks is a WordPress plugin developed by Pookidevs Technologies. You can contact us for a custom WordPress website, flutter application, and custom plugin development at our Official site.

57 thoughts on “How to Solve the Video Player Crashing Issue in Flutter.”

  1. Thanks on your marvelous posting! I seriously enjoyed reading it, you could be a great author. I will be sure to bookmark your blog and may come back at some point. I want to encourage continue your great work, have a nice day!

  2. Hi my family member! I want to say that this article is awesome, great written and come with almost all important infos. I’d like to see extra posts like this .

  3. Nice read, I just passed this onto a colleague who was doing some research on that.And he actually bought me lunch because I found it for him smile Solet me rephrase diets that work: Thank you for lunch!

  4. Thanks, I’ve recently been searching for info about this subject for ages and yours is the greatest I’ve came upon till now. However, what concerning the conclusion? Are you positive about the supply?

  5. An intriguing discussion is definitely worth comment. I do think that you should publish more about this subject matter, it may not be a taboo matter but usually people don’t discuss such issues. To the next! Best wishes!!

  6. carbide burrs for steel

    I love it when folks get together and share opinions. Great blog, continue the good work!

  7. Heya are using WordPress for your blog platform?I’m new to the blog world but I’m trying to get started and create my own. Do you need any codingexpertise to make your own blog? Any help would be really appreciated!

  8. Hello there, just became alert to your blog through Google, and found that it’s really informative. I’m going to watch out for brussels. I’ll appreciate if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  9. I will immediately clutch your rss feed as I can notin finding your email subscription hyperlink or e-newsletterservice. Do you’ve any? Kindly allow me realize so that Imay subscribe. Thanks.my blog :: Blast Portable Air Conditioner

  10. I love what you guys are up too. This type of clever work and exposure! Keep up the very good works guys I’ve incorporated you guys to my own blogroll.

  11. I’m not sure where you are getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this information for my mission.

  12. Excellent blog you have got here.. It?s difficult to find excellent writing like yours nowadays.I honestly appreciate individuals like you! Take care tips!!

  13. Excellent post. I was checking continuously this blog and I am impressed! Very useful information particularly the last part 🙂 I care for such information a lot. I was seeking this particular info for a long time. Thank you and best of luck.

  14. Britney Bloggs

    I really like what you guys are usually up too. This sort of clever work and coverage! Keep up the fantastic works guys I’ve incorporated you guys to my personal blogroll.

Leave a Comment

Your email address will not be published. Required fields are marked *