CODEWITHSUNDEEP
fluttervideovideo-streamingvideo-processingvideo-compression
Hafiz Muhammad Sufyan
Hafiz Muhammad Sufyan

Reputation: 21

How can I optimize video reels in flutter

I have a problem with my Flutter app. I want to display the videos in the same way as the Reels section of TikTok. Here is a screenshot of my app.

Problem:
It contains video reels, but each video takes time to load.

What I've tried:
I'm also compressing the videos when they're uploaded to the server. Loading still takes time.

Code that I'm using:

void _initializeController() async {
  String videoUrl = ConstRes.itemBaseUrl + widget.url!;
  _controller = VideoPlayerController.network(videoUrl);
  final fileInfo = await getCachedVideo(videoUrl);

  if (fileInfo == null) {
    await _controller!.initialize();
    setState(() {
      _controller!.setLooping(true);
      _controller!.play();
      widget.isLoading.call(false);
      widget.function.call(_controller);
    });
    cacheVideo(videoUrl);
  } else {
    _controller = VideoPlayerController.file(fileInfo.file);
    await _controller!.initialize();
    setState(() {
      _controller!.setLooping(true);
      _controller!.play();
      widget.isLoading.call(false);
      widget.function.call(_controller);
    });
  }
}

Upvotes: 0

Views: 646

Answers (1)

Afrah Shaikh
Afrah Shaikh

Reputation: 11

You can use the preloadpageview builder to preload the videos.

pubspec.yaml

preload_page_view:

the file:

import 'package:preload_page_view/preload_page_view.dart';

PreloadPageView.builder(
        controller: _pageController,
        preloadPagesCount: 8, // number of videos you want to preload
        scrollDirection: Axis.vertical,
        itemCount: videos.videos.length,
        itemBuilder: (BuildContext context, int position) {});

tip: you can load the next set of videos when you are at second last video from the pageview

Upvotes: 0

Related Questions