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.

Leave a Comment

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