fluttervideo-player

How to play multiple videos with (player_video) package


I have created this video player for my application which can play video from assets. Since, It is made from (video_player) package I guess I can play only one video with it But I want 3-4 videos to be played. How can I do that? It is possible or not...Help me! Furthermore, I also want to make the video the option of 10 seconds backward and forward while pressing it's sides. Thanks for your help!

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(VideoPlay());
}

class VideoPlay extends StatefulWidget {
  String? pathh;

  @override
  _VideoPlayState createState() => _VideoPlayState();

  VideoPlay({
    this.pathh = "assets/video.mp4", // Video from assets folder
  });
}

class _VideoPlayState extends State<VideoPlay> {
  late VideoPlayerController controller;
  late Future<void> futureController;

  @override
  void initState() {
    //url to load network
    controller = VideoPlayerController.asset(widget.pathh!);
    futureController = controller.initialize();

    controller.setLooping(true);
    controller.setVolume(25.0);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: FutureBuilder(
              future: futureController,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return AspectRatio(
                      aspectRatio: controller.value.aspectRatio,
                      child: VideoPlayer(controller));
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(6.0),
          child: RaisedButton(
            color: Color(0xff9142db),
            child: Icon(
              controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
              color: Colors.white,
            ),
            onPressed: () {
              setState(() {
                if (controller.value.isPlaying) {
                  controller.pause();
                } else {
                  controller.play();
                }
              });
            },
          ),
        )
      ],
    ));
  }
}

App Image Is Here


Solution

  • enter image description hereI like your idea and wanted to deal with it, this is the result. I hope you can do better.

    import 'package:flutter/material.dart';
    import 'package:video_player/video_player.dart';
    
    void main(List<String> args) {
      runApp(Example());
    }
    
    class Example extends StatelessWidget {
      const Example({
        Key? key,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          color: Colors.white,
          debugShowCheckedModeBanner: false,
          home: VideoPlayersList(),
        );
      }
    }
    
    class VideoPlayersList extends StatelessWidget {
      const VideoPlayersList({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        List<String> paths = [
          "assets/images/testvideo.mp4",
          "assets/images/testvideo.mp4",
          "assets/images/testvideo.mp4",
          "assets/images/testvideo.mp4",
          "assets/images/testvideo.mp4",
        ];
        return Scaffold(
          body: SingleChildScrollView(
            child: Column(children: [
              ListView.builder(
                shrinkWrap: true,
                physics: const BouncingScrollPhysics(),
                itemCount: paths.length,
                itemBuilder: (BuildContext context, int index) {
                  return VideoPlay(
                    pathh: paths[index],
                  );
                },
              ),
            ]),
          ),
        );
      }
    }
    
    class VideoPlay extends StatefulWidget {
      String? pathh;
    
      @override
      _VideoPlayState createState() => _VideoPlayState();
    
      VideoPlay({
        Key? key,
        this.pathh, // Video from assets folder
      }) : super(key: key);
    }
    
    class _VideoPlayState extends State<VideoPlay> {
      ValueNotifier<VideoPlayerValue?> currentPosition = ValueNotifier(null);
      VideoPlayerController? controller;
      late Future<void> futureController;
    
      initVideo() {
        controller = VideoPlayerController.asset(widget.pathh!);
    
        futureController = controller!.initialize();
      }
    
      @override
      void initState() {
        initVideo();
        controller!.addListener(() {
          if (controller!.value.isInitialized) {
            currentPosition.value = controller!.value;
          }
        });
        super.initState();
      }
    
      @override
      void dispose() {
        controller!.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
          future: futureController,
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator.adaptive();
            } else {
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: SizedBox(
                  height: controller!.value.size.height,
                  width: double.infinity,
                  child: AspectRatio(
                      aspectRatio: controller!.value.aspectRatio,
                      child: Stack(children: [
                        Positioned.fill(
                            child: Container(
                                foregroundDecoration: BoxDecoration(
                                  gradient: LinearGradient(
                                      colors: [
                                        Colors.black.withOpacity(.7),
                                        Colors.transparent
                                      ],
                                      stops: [
                                        0,
                                        .3
                                      ],
                                      begin: Alignment.bottomCenter,
                                      end: Alignment.topCenter),
                                ),
                                child: VideoPlayer(controller!))),
                        Positioned.fill(
                          child: Column(
                            children: [
                              Expanded(
                                flex: 8,
                                child: Row(
                                  children: [
                                    Expanded(
                                      flex: 3,
                                      child: GestureDetector(
                                        onDoubleTap: () async {
                                          Duration? position =
                                              await controller!.position;
                                          setState(() {
                                            controller!.seekTo(Duration(
                                                seconds: position!.inSeconds - 10));
                                          });
                                        },
                                        child: const Icon(
                                          Icons.fast_rewind_rounded,
                                          color: Colors.black,
                                          size: 40,
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                        flex: 4,
                                        child: IconButton(
                                          icon: Icon(
                                            controller!.value.isPlaying
                                                ? Icons.pause
                                                : Icons.play_arrow,
                                            color: Colors.black,
                                            size: 40,
                                          ),
                                          onPressed: () {
                                            setState(() {
                                              if (controller!.value.isPlaying) {
                                                controller!.pause();
                                              } else {
                                                controller!.play();
                                              }
                                            });
                                          },
                                        )),
                                    Expanded(
                                      flex: 3,
                                      child: GestureDetector(
                                        onDoubleTap: () async {
                                          Duration? position =
                                              await controller!.position;
                                          setState(() {
                                            controller!.seekTo(Duration(
                                                seconds: position!.inSeconds + 10));
                                          });
                                        },
                                        child: const Icon(
                                          Icons.fast_forward_rounded,
                                          color: Colors.black,
                                          size: 40,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                  flex: 2,
                                  child: Align(
                                    alignment: Alignment.bottomCenter,
                                    child: ValueListenableBuilder(
                                        valueListenable: currentPosition,
                                        builder: (context,
                                            VideoPlayerValue? videoPlayerValue, w) {
                                          return Padding(
                                            padding: const EdgeInsets.symmetric(
                                                horizontal: 20, vertical: 10),
                                            child: Row(
                                              children: [
                                                Text(
                                                  videoPlayerValue!.position
                                                      .toString()
                                                      .substring(
                                                          videoPlayerValue.position
                                                                  .toString()
                                                                  .indexOf(':') +
                                                              1,
                                                          videoPlayerValue.position
                                                              .toString()
                                                              .indexOf('.')),
                                                  style: const TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 22),
                                                ),
                                                const Spacer(),
                                                Text(
                                                  videoPlayerValue.duration
                                                      .toString()
                                                      .substring(
                                                          videoPlayerValue.duration
                                                                  .toString()
                                                                  .indexOf(':') +
                                                              1,
                                                          videoPlayerValue.duration
                                                              .toString()
                                                              .indexOf('.')),
                                                  style: const TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 22),
                                                ),
                                              ],
                                            ),
                                          );
                                        }),
                                  ))
                            ],
                          ),
                        ),
                      ])),
                ),
              );
            }
          },
        );
      }
    }