Here is my code
first of all I make list of all videos Info and urls and then make list view of video player and pass these urls one by one to video player of each video according to their index in the list.
- this is video urls array
List<String> AllVideosUrls = [
"videoUrl1",
"videoUrl2",
"videoUrl3",
"videoUrl3",
"videoUrl4",
]
- this is list view of video player
return PageView.builder(
itemCount: AllVideosUrls.length,
controller: PageController(initialPage: 0, viewportFraction: 1),
scrollDirection: Axis.vertical,
itemBuilder: ((context, index) {
final eachVideoUrl = AllVideosUrls[index];
return VideoPlayer(
videoFileUrl: eachVideoUrl()
);
}
),
)
- this is video player widget
class VideoPlayer extends StatefulWidget {
final String videoFileUrl;
const HomeVideoPlayer({
super.key,
required this.videoFileUrl,
});
@override
State<VideoPlayer> createState() => _VideoPlayerState();
}
class _VideoPlayerState extends State<VideoPlayer> {
VideoPlayerController? playerController;
bool isPlayerInitialized = true;
@override
void initState() {
super.initState();
playerController = VideoPlayerController.network(widget.videoFileUrl)
..initialize().then((value) {
setState(() {
isPlayerInitialized = false;
});
playerController!.play();
playerController!.setLooping(true);
playerController!.setVolume(2);
});
}
@override
void dispose() {
super.dispose();
playerController!.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
color: Colors.black,
),
child: Center(
child: AspectRatio(
aspectRatio: playerController!.value.aspectRatio,
child: VideoPlayer(playerController!),
),
),
);
}
}
I want that the videos should download already when I watch present video so this reduce the loading when we scroll up to next video.