Flutter中如何显示Firebase Storage视频URL并静音播放？

核心问题 #

1. 视频控制器未初始化：直接创建VideoPlayerController后未调用initialize()，视频资源无法完成加载，导致无法显示。
2. 控制器复用错误：全局单个_controller无法对应ListView中多个独立视频项，每个视频需要专属控制器。
3. 未配置静音属性：未设置视频播放时的静音参数。
4. 生命周期管理缺失：控制器未在合适时机初始化、释放，易引发内存泄漏。

修复步骤 #

1. 封装独立的视频列表项组件

创建TutorialVideoItem组件，单独管理每个视频的控制器生命周期：

class TutorialVideoItem extends StatefulWidget {
  final Tutorial tutorial;
  final double size;

  const TutorialVideoItem({
    super.key,
    required this.tutorial,
    required this.size,
  });

  @override
  State<TutorialVideoItem> createState() => _TutorialVideoItemState();
}

class _TutorialVideoItemState extends State<TutorialVideoItem> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化控制器并设置静音
    _controller = VideoPlayerController.network(widget.tutorial.url)
      ..setVolume(0.0) // 强制静音
      ..initialize().then((_) {
        setState(() {}); // 初始化完成后刷新UI
        _controller.play(); // 自动播放预览
        _controller.setLooping(true); // 循环播放预览
      });
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放控制器资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.cyan,
      width: widget.size,
      height: widget.size,
      child: _controller.value.isInitialized
          ? VideoPlayer(_controller)
          : const Center(child: CircularProgressIndicator()), // 加载中状态提示
    );
  }
}

2. 修改主页面的ListView构建逻辑

移除全局_controller，将原视频显示部分替换为上述封装组件：

class _AllTutorialAdminScreenState extends State<AllTutorialAdminScreen> {
  List<Tutorial> tutorial = [];

  Future<List<Tutorial>> fetchRecords() async {
    var records = await FirebaseFirestore.instance.collection('articles').get();
    return mapRecords(records);
  }

  List<Tutorial> mapRecords(QuerySnapshot<Object?>? records) {
    var _list = records?.docs
        .map(
          (tutorial) => Tutorial(
            id: tutorial.id,
            topic: tutorial['topic'],
            type: tutorial["type"],
            description: tutorial["description"],
            url: tutorial["url"],
          ),
        )
        .toList();

    return _list ?? [];
  }

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Scrollbar(
        isAlwaysShown: true,
        child: SizedBox(
          width: width * 1,
          height: height * 1,
          child: StreamBuilder<QuerySnapshot>(
            stream: FirebaseFirestore.instance.collection('articles').snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else if (!snapshot.hasData) {
                return const Center(child: CircularProgressIndicator()); // 数据加载中提示
              } else {
                List<Tutorial> data = mapRecords(snapshot.data);
                return ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (context, index) {
                    return SizedBox(
                      height: height * 0.20,
                      child: Card(
                        color: Colors.blue.withOpacity(0.4),
                        shape: RoundedRectangleBorder(
                          side: const BorderSide(color: Colors.redAccent),
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(16),
                          child: Row(
                            children: [
                              // 使用封装的视频组件
                              TutorialVideoItem(
                                tutorial: data[index],
                                size: 50,
                              ),
                              const SizedBox(width: 20),
                              // 可添加视频标题等信息
                              Expanded(
                                child: Text(
                                  data[index].topic,
                                  style: const TextStyle(fontSize: 16),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

关键优化点 #

• 每个视频项拥有独立控制器，避免资源冲突。
• 在initState中完成初始化、静音、自动播放配置。
• 实现控制器dispose，防止内存泄漏。
• 添加加载中状态提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Dasun Dola