导航跳转至其他页面时如何停止视频播放器

这里有几个可行的解决方案，针对你遇到的页面跳转后视频无法暂停的问题：

方案1：利用StatefulWidget生命周期判断页面活跃状态 #

在视频播放器所在的State类中，重写deactivate()方法，通过判断当前页面是否处于栈顶来触发暂停：

class VideoPlayerPageState extends State<VideoPlayerPage> {
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // 初始化Chewie控制器，示例代码：
    // _chewieController = ChewieController(
    //   videoPlayerController: VideoPlayerController.network('视频地址'),
    //   autoPlay: true,
    // );
  }

  @override
  void deactivate() {
    super.deactivate();
    // 当页面不在栈顶时，暂停视频
    if (!ModalRoute.of(context)!.isCurrent) {
      _chewieController.pause();
    }
  }

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

核心逻辑是ModalRoute.of(context)!.isCurrent：当你通过Navigator.push跳转到新页面时，原页面的isCurrent会变为false，此时调用暂停方法即可。

方案2：监听全局路由与APP生命周期变化 #

如果播放器所在Widget层级较深，或者需要全局处理路由跳转的暂停逻辑，可以通过WidgetsBindingObserver监听路由状态：

class VideoPlayerPageState extends State<VideoPlayerPage> with WidgetsBindingObserver {
  late ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 初始化控制器...
  }

  @override
  void didPushRoute(String route) {
    // 有新页面被push时，暂停视频
    _chewieController.pause();
    super.didPushRoute(route);
  }

  @override
  void didPopRoute() {
    // 页面被返回时，可根据需求恢复播放（可选）
    // _chewieController.play();
    super.didPopRoute();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // 顺带处理APP退到后台时的暂停逻辑
    if (state == AppLifecycleState.paused) {
      _chewieController.pause();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _chewieController.dispose();
    super.dispose();
  }
}

这个方案不仅能处理路由跳转的情况，还能兼顾APP前后台切换的场景，适用性更广。

方案3：通过状态管理共享控制器（适合跨页面场景） #

如果你的项目已经使用状态管理库（如Provider、GetX），可以将ChewieController托管到全局状态中，这样无论在哪个页面都能调用暂停方法：

以GetX为例：

// 全局视频控制器类
class GlobalVideoController extends GetxController {
  late ChewieController chewieController;

  @override
  void onInit() {
    super.onInit();
    // 初始化控制器
    chewieController = ChewieController(
      videoPlayerController: VideoPlayerController.network('视频地址'),
      autoPlay: true,
    );
  }

  // 提供暂停方法
  void pauseVideo() {
    chewieController.pause();
  }

  @override
  void onClose() {
    chewieController.dispose();
    super.onClose();
  }
}

// 在视频页面注入控制器
class VideoPlayerPage extends StatelessWidget {
  final videoController = Get.put(GlobalVideoController());

  @override
  Widget build(BuildContext context) {
    return Chewie(controller: videoController.chewieController);
  }
}

// 在跳转页面的逻辑中调用暂停
void navigateToOtherPage() {
  Get.find<GlobalVideoController>().pauseVideo();
  Get.to(() => OtherPage());
}

这种方式彻底解决了作用域问题，适合需要跨组件/页面操作播放器的场景。

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