How to play video that is picked from image_picker using video_player flutter.
I created a method to pick a video and display a video But the problem is I don’t know how to display a video. But this is what I got so far. It always says that the imageFile is null. Is there any to fix the problem? Please take a look at the code it’s not long.
code:
String fileName1 = '';
String path1 = '';
File? imageFile;
@override
void initState() {
loadVideoPlayer();
super.initState();
}
loadVideoPlayer() {
videoController = VideoPlayerController.file(videoFile!);
videoController.addListener(() {
setState(() {});
});
videoController.initialize().then((value) {
setState(() {});
});
}
\\To display a video
AspectRatio(
aspectRatio: videoController.value.aspectRatio,
child:VideoPlayer(videoController),
),
//Pause And Play
IconButton(
onPressed: () {
if (videoController
.value.isPlaying) {
videoController.pause();
} else {
videoController.play();
}
setState(() {});
},
icon: Icon(videoController.value.isPlaying
? Icons.pause
: Icons.play_arrow)),
//To pick video
void selectVideo() async {
final XFile? results = await picker.pickVideo(source: ImageSource.gallery);
if (results != null) {
path1 = results.path;
fileName1 = results.name.replaceFirst("image_picker", "");
setState(() {});
print(fileName1);
} else {
print('No video picked');
}
setState(() {
videoFile = File(results!.path);
});
}
CodePudding user response:
Do not call the loadVideoPlayer()
inside the initState
but reload the player every time a video is picked :
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
@override
State<Test> createState() => _TestState();
}
class _TestState extends State<Test> {
VideoPlayerController? _videoPlayerController;
loadVideoPlayer(File file) {
if(_videoPlayerController != null) {
_videoPlayerController!.dispose();
}
_videoPlayerController = VideoPlayerController.file(file);
_videoPlayerController!.initialize().then((value) {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: selectVideo,
child: Icon(
Icons.add,
),
),
body: Center(
child: Stack(
children: [
if (_videoPlayerController != null) ...[
AspectRatio(
aspectRatio: _videoPlayerController!.value.aspectRatio,
child: VideoPlayer(_videoPlayerController!),
),
]
],
),
),
);
}
void selectVideo() async {
final XFile? results =
await ImagePicker().pickVideo(source: ImageSource.gallery);
if (results != null) {
setState(() {
File file = File(results.path);
loadVideoPlayer(file);
});
} else {
print('No video picked');
}
}
}