How to play a List of video in Flutter?

Question

I'm using flutter video_player package to play a list of video.

List sourceList;

sourceList = [
  {
    "size": 69742504,
    "name": "lucky-roulette.mp4",
    "mimetype": "video/mp4",
  },
  {
    "size": 69742504,
    "name": "BigBuckBunny.mp4",
    "mimetype": "video/mp4",
  }
];

I've checked out this issue, and did some custom codes upon it.

void play() {
  log.fine("Now playing: $_nowPlayingUrl");
  _adController = VideoPlayerController.network(_nowPlayingUrl);
  _adController.initialize().then((_) => setState(() {}));
  _adController.play();
  _adController.addListener(checkIfVideoFinished);
}

void checkIfVideoFinished() {
  if (_adController == null ||
      _adController.value == null ||
      _adController.value.position == null ||
      _adController.value.duration == null) return;
  if (_adController.value.position.inSeconds ==
      _adController.value.duration.inSeconds) {
    _adController.removeListener(checkIfVideoFinished);
    _adController.dispose();
    // Change _nowPlayingIndex
    setState(() {
      _nowPlayingIndex = (_nowPlayingIndex + 1) % _totalIndex;
    });
    play();
  }
}

But use this code snippet would send out an exception Another exception was thrown: A VideoPlayerController was used after being disposed.

Is there a better way to play and loop a list of video in Flutter?

Answer 1

Recently I tested video list example. please check the source in github FlutterVideoListSample. I think the video widget must be disposed.

In my case, I clear the old VideoPlayerController before initialize it. And I don't use chewie plugin that make new page in entering fullscreen so cannot handle the next video widget.

dependencies

video_player: '>=0.10.11+1 <2.0.0'

some code in FlutterVideoListSample

VideoPlayerController _controller;

void _initializeAndPlay(int index) async {
  print("_initializeAndPlay ---------> $index");
  final clip = _clips[index];
  final controller = VideoPlayerController.asset(clip.videoPath());
  final old = _controller;
  if (old != null) {
    old.removeListener(_onControllerUpdated);
    old.pause(); // mute instantly
  }
  _controller = controller;
  setState(() {
    debugPrint("---- controller changed");
  });

  controller
    ..initialize().then((_) {
      debugPrint("---- controller initialized");
      old?.dispose();
      _playingIndex = index;
      controller.addListener(_onControllerUpdated);
      controller.play();
      setState(() {});
    });
}

Answer 2

You must call the video controller dispose method in Override dispose method. Need not call dispose method when removevideo.

Answer 3

This is how I played a list of videos, I am showing this example from the flutter web application where most of the video players are not supported that is why I am using the default one.

But on Android and IOS, this task is very easy to do with help of chewie or better_player packages. These packages provides very rich configuration step on the go.

Hope it will help in your case.

ListView.separated(
              shrinkWrap: true,
              itemCount: 2,
              itemBuilder: (context, index) {
                VideoPlayerController controller =
                    VideoPlayerController.network(
                        'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
                      ..initialize().then((_) {});

                controller.play();

                return AspectRatio(
                  aspectRatio: 16 / 9,
                  child: VideoPlayer(controller),
                );
              },
              separatorBuilder: (context, index) {
                return const SizedBox(height: 16.0);
              },
            ),

Answer 4

For anyone still having issues with this, I was able to find a way around it.

late VideoPlayerController _controller;
ImagePicker _picker = ImagePicker();

String _videoPath = '';

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.file(
    File(_videoPath)
  );

  _controller.addListener(() {
    setState(() {});
  });
  _controller.initialize().then((_) => setState(() {}));
  _controller.pause();
}

Now you should have a function that selects the video from your device:::

_chooseFromGallery(){
   _picker.pickVideo(source: ImageSource.gallery).then(((value) {
     if(value != null) {
        _videoPath = value.path;
        _controller.dispose(); // To remove an already existing playing video
        _controller = VideoPlayerController.file(File(_videoPath)); // Update the controller with a new file
        _controller.initialize().then((_) => setState(() {})); // Re-initialize the controller again.
      }
   }));
}

Then on the UI section:

SizedBox(
  child: _videoPath.isEmpty()
       ? Container()
       : AspectRatio(
           aspectRatio: _controller.value.aspectRatio,
           child: Stack(
           alignment: Alignment.bottomCenter,
           children: <Widget>[
              VideoPlayer(_controller),
           ],
          ),
        ),
  ),

NB: You can hook the '_chooseFromGallery' function to any widget you want to use for it, could be a button.