Flutter Web端视频后台播放、点击触发双视频异常问题咨询

这俩问题只在Web端出现、Android端正常，核心是Flutter Web的video_player基于浏览器原生<video>标签实现，和移动端原生播放器的资源回收逻辑完全不一样，再加代码里的生命周期、导航逻辑写漏了关键点：

• 所有控制器的dispose调用全被注释了，Web端不会自动回收没释放的媒体流，对应的DOM节点会一直留在后台播放
• 导航逻辑写错了：不管是跳播放页还是返回列表页，都用pushReplacement直接替换页面，原页面的dispose生命周期触发时机异常，控制器根本没机会正常释放
• 点卡片跳转的时候，卡片的控制器和新页面的控制器几乎同时初始化，都持有同一路视频流，自然会同时播两个；再加Web端video_player有个已知兼容坑：释放控制器前如果不先调用pause()，就算执行了dispose，音频还是会残留播放
• 列表里10个VideoCard每个都单独初始化一个视频控制器加载同一个地址，平白多占资源，也增加了异常播放的概率

1. 修正控制器释放逻辑 #

所有涉及视频控制器的dispose方法，严格遵循「先暂停、再释放上层控制器、最后释放底层控制器」的顺序，释放逻辑必须写在super.dispose()之前。

列表页VideoCard的dispose修正 #

@override
void dispose() {
  System.printValue("Dispose :: training video");
  _controller.pause(); // Web端必须先暂停，否则会残留后台音频
  _controller.dispose();
  super.dispose();
}

播放页VideoPlayerScreen的dispose修正 #

@override
void dispose() {
  System.printValue("Dispose :: video player");
  chewieController.pause();
  chewieController.dispose(); // 先释放上层Chewie控制器
  _controller.pause();
  _controller.dispose(); // 再释放底层video_player控制器
  super.dispose();
}

2. 修正导航逻辑 #

不要用pushReplacement来回切页面，跳转播放页用普通push入栈，返回时用pop出栈，保证页面生命周期正常触发：

VideoCard点击跳转逻辑修正 #

不要在点击事件里直接调用卡片控制器的dispose，避免组件销毁和页面跳转时机冲突，先暂停当前控制器再跳转即可：

onPressed: () async {
  _controller.pause();
  // 用push代替pushReplacement，保留列表页栈状态
  await Navigator.of(context).push(MaterialPageRoute(
    builder: (context) => const VideoPlayerScreen(videoUrl: videoUrl),
  ));
  // 从播放页返回后刷新状态，保证缩略图保持暂停
  if (mounted) setState(() {});
},

播放页返回按钮逻辑修正 #

直接pop出栈，不要重新新建列表页：

onPressed: () {
  Navigator.of(context).pop();
},

3. 可选优化（解决多控制器冗余加载问题） #

列表里的缩略图不需要完整播放能力，初始化VideoCard的控制器时可以加静音、禁止自动播放的配置，减少异常触发概率：

@override
void initState() {
  super.initState();
  System.printValue("Initialized :: training video");
  _controller = VideoPlayerController.network(videoUrl)
    ..setVolume(0) // 缩略图默认静音
    ..initialize().then((_) {
      _controller.pause();
      setState(() {});
    });
}

如果要进一步优化性能，可以把列表缩略图换成视频第一帧截图，不用为每个卡片初始化独立的视频控制器，从根源避免多实例冲突。

内容的提问来源于stack exchange，提问作者BC TUBE