Flutter：视频缓冲时 CircularProgressIndicator() 不起作用

Question

我是 Flutter 和 Dart 的新手。我的目标是制作一个具有播放、暂停、重播和缓冲功能的视频。我现在的问题是我调用了 CircularProgressIndicator() 但它不起作用。

这就是我所做的：

final bool isBuffering = false; 

这是我调用 CircularProgressIndicator 的地方

Widget _buildPlayStack() {
    return Stack(
      children: [
        _buildPlay(),
          child: FlatButton(
            onPressed: () => setState(() {
               _vidController.value.isPlaying ? _vidController.pause() :_vidController.play();           
            }),
            child: Center(
              child: (_vidController.value.isPlaying)
                      ? Icon(Icons.pause, color: Colors.green)
                      : Icon(Icons.play_arrow, color: Colors.green),
            ),
          ),
        Center(
            child: _vidController.value.isBuffering
                ? const CircularProgressIndicator()
                : null),
      ],
    );
  }

Widget _buildPlay() {
    return Container(
      child: AspectRatio(
          aspectRatio: _vidController.value.aspectRatio,
          child: VideoPlayer(_controller),
        ),
    );
  }

Answer 1

你必须传递一些

value:

，例如：

child: showProgress
          ? CircularProgressIndicator(value:progress)
          : Text('Click on Refreseh button

并且您必须使用 setState 更新进度

对于您的具体情况，flutter 有专门适合您的文档。 播放和暂停视频

Answer 2

这对我有帮助。

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoViewScreen extends StatefulWidget {
  final String videoURL;

  const VideoViewScreen({
    Key? key,
    required this.videoURL,
  }) : super(key: key);

  @override
  State<VideoViewScreen> createState() => _VideoViewScreenState();
}

class _VideoViewScreenState extends State<VideoViewScreen> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(
      Uri.parse(widget.videoURL),
    )
      ..setLooping(true)
      ..initialize().then((value) {
        _controller.play(); //autoplay whenever it is initialized
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: blackColor,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                _controller.value.isInitialized
                    ? AspectRatio(
                        aspectRatio: _controller.value.aspectRatio,
                        child: VideoPlayer(
                          _controller,
                        ),
                      )
                    : const SizedBox(
                        height: 220,
                      ),
                VideoProgressBar(controller: _controller),
                //To show that the video is buffering
              ],
            ),
            VideoProgressIndicator(
              _controller,
              allowScrubbing: true,
              colors: const VideoProgressColors(bufferedColor: colorPrimary),
            ),
          ],
        ),
      ),
    );
  }

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


class VideoProgressBar extends StatefulWidget {
  final VideoPlayerController controller;

  const VideoProgressBar({Key? key, required this.controller})
      : super(key: key);

  @override
  State<VideoProgressBar> createState() => _VideoProgressBarState();
}

class _VideoProgressBarState extends State<VideoProgressBar> {
  var showLoadingProgress = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      widget.controller.addListener(() {
        if (widget.controller.value.isBuffering) {
          if (!showLoadingProgress) {
            setState(() {
              showLoadingProgress = true;
            });
          }
        } else if (widget.controller.value.isPlaying) {
          if (showLoadingProgress) {
            setState(() {
              showLoadingProgress = false;
            });
          }
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      width: 40,
      child: showLoadingProgress ? const CircularProgressIndicator() : const SizedBox(),
    );
  }
}