Flutter video caching for 10 seconds on next 4 videos
this is what I used in my app, preload_page_view, it preloads a specific count of pre/next pages:
@override
Widget build(BuildContext context) {
return new PreloadPageView.builder(
itemCount: ...,
itemBuilder: ...,
onPageChanged: (int position) {...},
.....
preloadPagesCount: 3,
controller: PreloadPageController(),
);
}
Pratik Butani
Pratik Butani is Android/Flutter Lead at 7Span - Ahmedabad. He is working with Flutter Development since 2020 and Android Development since 2013. He is on the list of Top 100 User’s (85th) in India and Top 10 User’s (6th) in Gujarat as Highest Reputation Holder on StackOverflow. He was co-organizer at Google Developer Group – Rajkot in 2014-17. All-time Learner of new things, Googler and Eager to Help IT Peoples. He is also likes to share his knowledge of Android and Flutter with New Learner. SOReadyToHelp ツ Fell in Love with Android ツ I really feel proud to up-vote My Favorite #SO friend. => Android Application Developer by Passion :) => Being Helpful by Nature ;) => Now in List of Top 100 User's (85) in India and Top 10 User's (6) in Gujarat as Highest Reputation Holder on StackOverflow => Visit my blogs for learning new things : Happy to Help :) :) => My Apps on Playstore: AndroidButs & PratikButani => My Articles on Medium => Join Me on LinkedIn => Tweet Me on Twitter => Follow Me on Quora - Top Writer on Quora in 2017 => Hangout with Me on [email protected] => Social Networking Facebook => Get Users list whose bio's contains given keywords More about me :) -> Pratik Butani
Updated on January 01, 2023Comments
-
Pratik Butani over 1 year
Does anyone know how to do Flutter Video Caching in List for 4 to 6 seconds? (For next 5 videos) like Instagram reels.
Is there any way to do it?
I had taken PageView.builder to show a video with a full page.
I have tried one cached_video_player but it's loading full video.
Here is what I have done.
VideoWidget:
typedef OnVideoCompleted = void Function(); class VideoWidget extends StatefulWidget { //final bool? play; final bool? isDuetVideo; final String? url; final OnVideoCompleted? onVideoCompleted; final HomeWidgetBloc? homeWidgetBloc; const VideoWidget( {Key? key, this.onVideoCompleted, required this.url, required this.homeWidgetBloc, required this.isDuetVideo}) : super(key: key); @override _VideoWidgetState createState() => _VideoWidgetState(); } class _VideoWidgetState extends State<VideoWidget> { late VideoPlayerController videoPlayerController; late Future<void> _initializeVideoPlayerFuture; final _controllerStateStream = BehaviorSubject<int>.seeded(0); VoidCallback? _listener; StreamSubscription? _playPauseSubscription; @override void initState() { super.initState(); videoPlayerController = new VideoPlayerController.network(widget.url!); videoPlayerController.initialize().then((_) { // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed. _controllerStateStream.add(1); _observeForPlayPause(); _observerForSeekDuration(); _listener = () { final value = widget.homeWidgetBloc?.videoEndedStream.valueWrapper?.value; print('duration -----value--- ${value}'); if (videoPlayerController.value.duration.inSeconds > 0 && videoPlayerController.value.position.inMilliseconds == videoPlayerController.value.duration.inMilliseconds && (videoPlayerController.value.position.inMilliseconds == videoPlayerController.value.duration.inMilliseconds)) { // FOR AUTO PLAY NEXT VIDEO... widget.onVideoCompleted?.call(); print( 'duration -----addListener--- ${videoPlayerController.value.duration}'); } }; videoPlayerController.addListener(_listener!); }); } // This closing tag was missing @override void dispose() { super.dispose(); _controllerStateStream.close(); _playPauseSubscription?.cancel(); try { if (_listener != null) { videoPlayerController.removeListener(_listener!); } videoPlayerController.dispose(); } catch (e) { print(e.toString()); } } @override Widget build(BuildContext context) { return StreamBuilder<int>( stream: _controllerStateStream, builder: (context, snapshot) { final isReady = (snapshot.data ?? 0) == 1; if (!isReady) { return _progressWidget(); } return new Stack(children: <Widget>[ Container( child: Center( child: (widget.isDuetVideo! || videoPlayerController.value.size.width > videoPlayerController.value.size.height) ? AspectRatio( child: VideoPlayer( videoPlayerController, ), aspectRatio: videoPlayerController.value.aspectRatio, ) : VideoPlayer( videoPlayerController, ), widthFactor: double.maxFinite, heightFactor: double.maxFinite, ), ), Visibility( visible: !widget.isDuetVideo!, child: VideoPlayerCustomControlsWidget( controller: videoPlayerController, ), ), ]); }, ); } Center _progressWidget() { return Center( child: CircularProgressIndicator( color: AppStyles.primary500Color, ), ); } void _observeForPlayPause() { _playPauseSubscription = widget.homeWidgetBloc?.videoPlayPauseStream.listen((value) { if (value == PLAY) videoPlayerController.play(); else videoPlayerController.pause(); }); } void _observerForSeekDuration() { _playPauseSubscription = widget.homeWidgetBloc?.duetVideoSeekDurationZeroStream.listen((value) { if (value == true) videoPlayerController.seekTo(Duration.zero); widget.homeWidgetBloc?.duetVideoSeekDurationZeroStream.add(false); }); } }
Update:
I found many answers (like this) but that all answers are only for caching the current video, not the next/prev videos from the list. I want it, especially for the list.