如何在扑朔迷离的视频中预加载视频？

Question

如何使用Page View（例如Tiktok and Reels）在不每次加载的情况下进行颤动预加载视频。在视频之间滚动时，不应该有任何加载。如果及其他国家管理仅使用，只有提供商或RiverPod才需要使用。下面的代码正常工作，但每个视频滚动之间都有一个加载。

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> urls = [
      'https://firebasestorage.googleapis.com/v0/b/gyft-app-official.appspot.com/o/publicData%2FhomePage%2FscrapBook%2Fa4%2F30.%20Anil%20Kumar.mp4?alt=media&token=57afa0dc-7514-4932-828b-1fb014178eeb',
      'https://firebasestorage.googleapis.com/v0/b/gyft-app-official.appspot.com/o/publicData%2FhomePage%2FscrapBook%2Fa4%2F39.%20Vaishnavi%20Chaitanya.mp4?alt=media&token=532171ee-ab13-4292-aabf-c9cd2144eace'
    ];

    return PageView.builder(
        scrollDirection: Axis.vertical,
        itemCount: urls.length,
        itemBuilder: (BuildContext context, int index) {
          return Video(urls[index]);
        });
  }
}

class Video extends StatefulWidget {
  final String url;
  const Video(this.url, {Key? key}) : super(key: key);

  @override
  VideoState createState() => VideoState();
}

class VideoState extends State<Video> {
  late CachedVideoPlayerController _controller;

  @override
  void initState() {
    _controller = CachedVideoPlayerController.network(widget.url)
      ..initialize().then((_) {
        _controller.play();
        _controller.setLooping(true);
        setState(() {});
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _controller.value.isInitialized
        ? GestureDetector(
            onTap: () {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            },
            child: CachedVideoPlayer(_controller),
          )
        : Container();
  }

  @override
  void deactivate() {
    _controller.pause();
    debugPrint('Paused');
    super.deactivate();
  }

  @override
  void dispose() {
    _controller.dispose();
    debugPrint('Disposed');
    super.dispose();
  }
}

https://miro.medium.medium.com/max/1050/1050/150/150/1/1050/1* wrti9s-tufffeplvgbnj6a.gif

Answer 1

这就是我在应用程序中使用的内容， preload_page_view ，它预定了前一个页面/下一页的特定计数：

  @override
  Widget build(BuildContext context) {
    return new PreloadPageView.builder(
      itemCount: ...,
      itemBuilder: ...,
      onPageChanged: (int position) {...},
      .....
      preloadPagesCount: 3,
      controller: PreloadPageController(),
    );
  }