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 theposition` 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

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 3

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";
}