How to implement Video Player with play/pause buttons without floating action button in flutter?

Question

I have a video file in my flutter application. I am playing that video with the help of video_player package from flutter. The video is playing perfectly, but according to their documentation the only way to have the pause/play buttons are floating action buttons. I want the pause/play button above the video and centre of it. Is there any way to do this?

Following is my code:

void initState() {
    // TODO: implement initState
    super.initState();

      _controller = VideoPlayerController.network(
        imageapiurl + '/question/' + id + '/' + questionimageurl,
      );

      // Initialize the controller and store the Future for later use.
      _initializeVideoPlayerFuture = _controller.initialize();

      // Use the controller to loop the video.
      _controller.setLooping(true);
  }

FutureBuilder(
                          future: _initializeVideoPlayerFuture,
                          builder: (context, snapshot) {
                            if (snapshot.connectionState ==
                                ConnectionState.done) {
                              // If the VideoPlayerController has finished initialization, use
                              // the data it provides to limit the aspect ratio of the video.
                              return AspectRatio(
                                aspectRatio: _controller.value.aspectRatio,
                                // Use the VideoPlayer widget to display the video.
                                child: GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        // If the video is playing, pause it.
                                        if (_controller.value.isPlaying) {
                                          _controller.pause();
                                        } else {
                                          // If the video is paused, play it.
                                          _controller.play();
                                        }
                                      });
                                    },
                                    child: VideoPlayer(_controller)),
                              );
                            } else {
                              // If the VideoPlayerController is still initializing, show a
                              // loading spinner.
                              return Center(child: CircularProgressIndicator());
                            }
                          },
                        ),

Can someone please tell me how to add those buttons above the video?

Answer 1

Can add an overlay to play or pause video.

VideoPlayerController _controller;

  bool _onTouch = false;

  Timer _timer;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        widget.videoPath ?? 'none'
    );

    _controller.setLooping(widget.loop);
    _controller.initialize().then((_) {

      setState(() {
      });
    });
    _controller.play();
  }

  @override
  void dispose() {
    _controller.dispose();
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _controller.value.isInitialized ? Stack(
      children: <Widget>[
        VideoPlayer(_controller),

        // Add a play or pause button overlay
        Visibility(
          visible: _onTouch,
          child: Container(
            color: Colors.grey.withOpacity(0.5),
            alignment: Alignment.center,
            child: FlatButton(
              shape: CircleBorder(side: BorderSide(color: Colors.white)),
              child: Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow, color: Colors.white,),
              onPressed: () {
                _timer?.cancel();

                // pause while video is playing, play while video is pausing
                setState(() {
                  _controller.value.isPlaying ?
                  _controller.pause() :
                  _controller.play();
                });

                // Auto dismiss overlay after 1 second
                _timer = Timer.periodic(Duration(milliseconds: 1000), (_) {
                  setState(() {
                    _onTouch = false;
                  });
                });
              },
            ),
          ),
        )
      ],
    ) : Container();
  }

Answer 2

It is definitely possible to create custom pause / play buttons.

The only thing you need is a reference to your VideoPlayerController and call the pause() or play() methods.

In order to do so I would remove the use of a FutureBuilder and init the video player at the creation of your StatefulWidget:

  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.networkVideo,
                videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _controller.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  VideoPlayer(_controller),
                  ClosedCaption(text: null), 
                  // Here you can also add Overlay capacities
                  VideoProgressIndicator(
                    _controller,
                    allowScrubbing: true,
                    padding: EdgeInsets.all(3),
                    colors: VideoProgressColors(
                        playedColor: Theme.of(context).primaryColor),
                  ),
                ],
              ),
            )
          : Container(
              height: 250,
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
    );
}