how to show current play time of video when using video_player plugin in flutter?

Question

Currently using the flutter video_player plugin stream video from the given link. Issue is that I had to hide the normal video interactive interface so that user can't skip the video. Now most of the work is done, just need to know how to display duration and current position of the video been played.

videoController.value.duration.inSeconds gives me the duration part, and videoController.value.position gives the position. But how to keep updating the results for the position. But how to keep updating the results for the position` section?

void checkTimer(){
    if(playerController.value.position == playerController.value.duration){
      setState(() {
        Duration duration = Duration(milliseconds: playerController?.value?.position?.inMilliseconds?.round());

      nowTime = [duration.inHours, duration.inMinutes, duration.inSeconds]
        .map((seg) => seg.remainder(60).toString().padLeft(2, '0'))
        .join(':');
      });
    }

above code was created to update the time as needed. but now the issue is how to update time. should I use setState() or something else, because the above code is not working for me.

Video is not loaded where then screen is loaded. It's loaded when then users click the play button. so till that time, we don't even have a duration value as data is still on the wayt.

Answer 1

How about using ValueListenableBuilder ?

It will listen to the controller's value and update it every time the value changes.

here's the sample :

ValueListenableBuilder(
  valueListenable: playerController,
  builder: (context, VideoPlayerValue value, child) {
    //Do Something with the value.
    return Text(value.position.toString());
  },
);

Answer 2

Try this:

1. Create a new Stateful Widget to display the counter for current position,
2. Pass videoPlayerController as a parameter in the widget,
3. Listen to the videoPlayerController in initState and add setSate to the listened value

Here's the code,

const _currentVideoPositionWidth = 38.0;
const _minTwoDigitValue = 10;

class _CurrentVideoPosition extends StatefulWidget {
  const _CurrentVideoPosition({
    Key? key,
    required this.videoPlayerController,
  }) : super(key: key);
  final VideoPlayerController videoPlayerController;

  @override
  _CurrentVideoPositionState createState() => _CurrentVideoPositionState();
}

class _CurrentVideoPositionState extends State<_CurrentVideoPosition> {
  int currentDurationInSecond = 0;

  @override
  void initState() {
    widget.videoPlayerController.addListener(
      () => setState(() => currentDurationInSecond = widget.videoPlayerController.value.position.inSeconds),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Container(
        width: _currentVideoPositionWidth,
        alignment: Alignment.centerRight,
        child: Text(
          _formatCurrentPosition(),
          style: Theme.of(context).textTheme.bodyText1?.copyWith(
                color: Colors.white,
              ),
          maxLines: 1,
        ),
      );

  String _formatCurrentPosition() =>
      currentDurationInSecond < _minTwoDigitValue ? "0 : 0$currentDurationInSecond" : "0 : $currentDurationInSecond";
}

Answer 3

use the built-in widget from the video player plugin. [See more on their example on github][https://github.com/999eagle/plugins/blob/master/packages/video_player/example/lib/main.dart]

           VideoProgressIndicator(
                  _videoController,//controller
                  allowScrubbing: true,
                  colors: VideoProgressColors(
                    playedColor: primary,
                    bufferedColor: Colors.red,
                    backgroundColor: black,
                  ),
                )


  [1]: https://github.com/999eagle/plugins/blob/master/packages/video_player/example/lib/main.dart

Answer 4

late VideoPlayerController _phenikaaVideoPlayerController;
late Future<void> _initializeVideoPlayerFuture;

@override
void initState() {
     super.initState();
     _phenikaaVideoPlayerController = VideoPlayerController.network(
     "https://assets-phenikaa-website.s3.ap-southeast- 
     1.amazonaws.com/media/assets/mo-hinh-3-nha.mp4",
    );

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

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

---

FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (_, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return Column(
            children: [
              // If the VideoPlayerController has finished initialization, use
              // the data it provides to limit the aspect ratio of the video.
              AspectRatio(
                aspectRatio:
                    _phenikaaVideoPlayerController.value.aspectRatio,
                // Use the VideoPlayer widget to display the video.
                child: VideoPlayer(_phenikaaVideoPlayerController),
              ),
              // show the video progress & scrubbing by touch event on it
              VideoProgressIndicator(
                _phenikaaVideoPlayerController,
                allowScrubbing: true,
                padding: EdgeInsets.zero,
                colors: VideoProgressColors(
                  backgroundColor: Color(0xFF243771),
                  playedColor: R.colors.redFF0000,
                  bufferedColor: R.colors.grayF5F6F8,
                ),
              ),
              SizedBox(height: R.dimens.smallSpacing),
              Row(
                children: [
                  SizedBox(width: R.dimens.smallSpacing2),
                  InkWell(
                    onTap: () {
                      if (_phenikaaVideoPlayerController.value.isPlaying) {
                        _phenikaaVideoPlayerController.pause();
                      } else {
                        _phenikaaVideoPlayerController.play();
                      }
                    },
                    child: ValueListenableBuilder<VideoPlayerValue>(
                      valueListenable: _phenikaaVideoPlayerController,
                      builder: (_, _videoPlayerValue, __) {
                        return Icon(
                          _videoPlayerValue.isPlaying
                              ? Icons.pause_circle_outline_rounded
                              : Icons.play_circle_outline_rounded,
                        );
                      },
                    ),
                  ),
                  SizedBox(width: R.dimens.smallSpacing2),
                  InkWell(
                    onTap: () {
                      _phenikaaVideoPlayerController
                          .seekTo(Duration(seconds: 0));
                      _phenikaaVideoPlayerController.pause();
                    },
                    child: Icon(Icons.stop_circle_outlined),
                  ),
                  SizedBox(width: R.dimens.smallSpacing2),
                  // render duration video with current position / total video duration
                  ValueListenableBuilder<VideoPlayerValue>(
                    valueListenable: _phenikaaVideoPlayerController,
                    builder: (_, _videoPlayerValue, __) {
                      return Text(
                        "00:${_videoPlayerValue.position.inSeconds.toString().padLeft(2, '0')}",
                        style: R.styles.titleTextStyleW500S16,
                      );
                    },
                  ),
                  Text(
                    " / 00:${_phenikaaVideoPlayerController.value.duration.inSeconds.toString()}",
                    style: R.styles.titleTextStyleW500S16,
                  ),
                  Spacer(),
                  //render Volume button
                  InkWell(
                    onTap: () {
                      if (_phenikaaVideoPlayerController.value.volume ==
                          0.0) {
                        _phenikaaVideoPlayerController.setVolume(1.0);
                      } else
                        _phenikaaVideoPlayerController.setVolume(0.0);
                    },
                    child: ValueListenableBuilder<VideoPlayerValue>(
                      valueListenable: _phenikaaVideoPlayerController,
                      builder: (_, _videoPlayerValue, __) {
                        return Icon(
                          _videoPlayerValue.volume == 0.0
                              ? Icons.volume_off_outlined
                              : Icons.volume_up_outlined,
                        );
                      },
                    ),
                  ),
                  SizedBox(width: R.dimens.smallSpacing2),
                ],
              ),
            ],
          );
        } else {
          // If the VideoPlayerController is still initializing, show a
          // loading spinner.
          return Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: R.dimens.mediumSpacing1),
            child: CircularProgressIndicator(
              color: Color(0xFF243771),
            ),
          );
        }
      },
    ),

---

Follow my widget tree with the image demo below