Flutter video_player restart video from start on tap - ios

Question

I am using the flutter video_player package to play a short video file using in my application. I inspired from the flutter cookbook: Play and pause a video.
I would like to allow the user to tap on the video to restart it from beginning. So I wrapped the VideoPlayer with a GestureDetector.
I currently have the following code:
class MyVideoPlayer extends StatefulWidget {
final File videoFile;
MyVideoPlayer({Key key, this.videoFile}) : super(key: key);
#override
_MyVideoPlayerState createState() => _MyVideoPlayerState();
}
class _MyVideoPlayerState extends State<MyVideoPlayer> {
VideoPlayerController _controller;
Future<void> _initializeVideoPlayerFuture;
#override
void initState() {
_controller = VideoPlayerController.file(widget.videoFile);
_initializeVideoPlayerFuture = _controller.initialize();
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
print(snapshot.connectionState);
if (snapshot.connectionState == ConnectionState.done) {
// Play video once it's loaded
_controller.play();
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: GestureDetector(
onTap: () async {
await _controller.seekTo(Duration.zero);
_controller.play();
},
child: VideoPlayer(_controller),
),
);
} else {
return CircularProgressIndicator();
}
},
);
}
}
The video plays well once the video file is loaded (once the connection state passed to done), however, when I try to tap on the video to replay it a second time, it doesn't replay the video from start. The audio starts playing again, but video doesn't restart playing. Any idea?
EDIT 1
Following #marcosboaventura suggestion, I tried to wrap the calls in a setState to trigger the build method again:
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: GestureDetector(
onTap: () async {
await _controller.seekTo(Duration.zero);
setState(() {
_controller.play();
});
},
child: VideoPlayer(_controller),
),
);
But still the video doesn't replay, only the sound. Any other idea?

Answer 1

I finally found a solution to my issue by calling initialize() again on the controller on the tap event if the video is no longer playing (i.e. the video finished already).
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: GestureDetector(
onTap: () {
if (!_controller.value.isPlaying) {
setState(() {});
_controller.initialize();
}
},
child: VideoPlayer(_controller),
),
);

Answer 2

You need to rebuild the VideoPlayer if you changes anything in video playback. The most simple solution to your case is just fire build method again with a setState call.
/// ... after some code
child: GestureDetector(
onTap: () async {
await _controller.seekTo(Duration.zero);
setState( () {
_controller.play();
} );
},
child: VideoPlayer(_controller),
),

Answer 3

I solve this problem in this way.
GestureDetector(
onTap() {
if(_controller.value.position==_controller.value.duration){
_controller.initialize();
}
}
)
_controller.value.duration store the video duration,
_controller.value.position store the actual position of the video and if the video reaches to the end the _controller.value.position will be equal by _controller.value.duration.

Answer 4

you can do something like this onTap
/// get the duration of the video
final duration = await _controller.position;
/// check if video has ended
if (duration.inSeconds ==_controller.value.duration.inSeconds) {
/// restart the video by setting current position to 0
_controller.seekTo(Duration.zero);
} else {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
}