使用Video组件播放视频，当App切换到后台后再次返回如何让Video组件继续播放当前视频？

import { useEffect, useRef, useState } from '@arkui/hooks';
import { Video, Stack, Button } from '@arkui/components';

function App() {
  const videoRef = useRef<Video>(null);
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    // 监听应用切换到后台
    const handleAppHide = () => {
      if (videoRef.current && !videoRef.current.paused) {
        videoRef.current.pause();
        setIsPaused(true);
      }
    };

    // 监听应用返回前台
    const handleAppShow = () => {
      if (isPaused && videoRef.current) {
        videoRef.current.play();
        setIsPaused(false);
      }
    };

    // 添加监听器
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        handleAppHide();
      } else {
        handleAppShow();
      }
    });

    // 清除监听器
    return () => {
      document.removeEventListener('visibilitychange', () => {
        if (document.hidden) {
          handleAppHide();
        } else {
          handleAppShow();
        }
      });
    };
  }, [isPaused]);

  return (
    <Stack>
      <Video
        ref={videoRef}
        src="your_video_url.mp4"
        controls
        autoplay
        style={{ width: '100%', height: 'auto' }}
      />
      <Button onClick={() => videoRef.current?.pause()}>Pause</Button>
      <Button onClick={() => videoRef.current?.play()}>Play</Button>
    </Stack>
  );
}

export default App;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

@Entry  
@Component  
struct VideoPlayerPage {  
  @State videoSrc: Resource = $rawfile('videoTest.mp4')  
  @State previewUri: Resource = $r('app.media.preview');  
  controller: VideoController = new VideoController();  
  
  // 页面显示，继续播放  
  onPageShow() {  
    this.controller.start();  
  }  
  // 页面隐藏，暂停播放  
  onPageHide() {  
    this.controller.pause();  
  }  
  build() {  
    Row() {  
      Column() {  
        Video({  
          src: this.videoSrc,  
          previewUri: this.previewUri,  
          controller: this.controller  
        })  
          .width('100%')  
          .height(600)  
          .autoPlay(false)  
          .controls(true)  
          .loop(false)  
          .objectFit(ImageFit.Contain)  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.