HarmonyOS 鸿蒙Next 应用前后台切换时，如何解决Video组件播放发生中断的问题

HarmonyOS 鸿蒙Next 应用前后台切换时，如何解决Video组件播放发生中断的问题

【问题现象】

自定义的组件嵌入到主页面，在页面播放视频被切换到后台，再返回到前台。

期待效果： 视频继续播放。

实际效果： 视频停止播放，需要刷新页面，才能继续播放。

【背景知识】

• UIAbility组件生命周期：当用户打开、切换和返回到对应应用时，应用中的UIAbility实例会在其生命周期的不同状态之间转换。
• Foreground和Background状态：Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发，对应于onForeground()回调和onBackground()回调。
• Watch和自定义组件更新：@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。

【定位思路】

结合背景知识可以了解到播放视频必须调用controller.start()，如下代码。虽然首次进入页面时可以通过aboutToAppear或者onPageShow调用，但是前后台切换的时候，这两个方法都没有被调用到，所以会出现视频无法继续播放的情况。

controller: VideoController = new VideoController()this.controller.start();

【解决方案】

为了实现前后太切换能够继续播放的效果，结合UIAbility组件生命周期和@Watch和自定义组件更新，考虑在前后台切换时，对APP全局变量的值进行修改，然后通过监听APP全局变量值，以及对其进行判断，来控制视频的停止和播放。

（1）在前后台切换时，对APP里的全局变量isForeGround进行赋值或者修改。

代码示例如下：

onForeground(): void {
  // 切到前台 ，设置isForeGround 值为true
  console.log('onForeground-切换到前台了');
  AppStorage.setOrCreate('isForeGround', true);
}

onBackground(): void {
  // 切到后台,设置isForeGround 值为false
  console.log('onBackground-切换到后台了');
  AppStorage.setOrCreate('isForeGround', false)
}

（2）在当前组件用watch来监听APP全局变量。

代码示例如下：

// 监听 isForeGround 的值
[@Watch](/user/Watch)('network') @StorageLink('isForeGround') isForeGround: boolean = false;

network(changedPropertyName: string) {
  // 切换到前台了，视频播放
  if (this.isForeGround) {
    this.controller.start();
  } else {
    // 切换到后台了，视频停止播放
    this.controller.stop();
  }
}