浏览代码

feat(video_play): 添加页面可见性变化处理

- 监听 visibilitychange 事件,当页面重新可见时调用 handlePageVisible 方法
- 实现 handlePageVisible 方法,处理页面可见时的视频播放逻辑
- 优化用户体验,确保页面切换后视频能够正确播放或暂停
tianyunperfect 3 月之前
父节点
当前提交
d9d175b5bd
共有 1 个文件被更改,包括 19 次插入0 次删除
  1. 19 0
      video_play/index.html

+ 19 - 0
video_play/index.html

@@ -77,6 +77,12 @@
             },
             mounted() {
                 this.fetchFiles()
+                // 处理页面可见性变化
+                document.addEventListener('visibilitychange', () => {
+                    if (document.visibilityState === 'visible') {
+                        this.handlePageVisible();
+                    }
+                });
             },
             computed: {
                 currentFile() {
@@ -95,6 +101,19 @@
                 },
             },
             methods: {
+                // 新增方法: 页面可见时处理
+                handlePageVisible() {
+                    const player = this.$refs.videoPlayer;
+                    if (!player) return;
+                    // 记录当前播放状态
+                    const wasPlaying = !player.paused;
+
+                    player.pause();
+                    if (wasPlaying) {
+                        player.currentTime = player.currentTime - 0.001;
+                        player.play();
+                    }
+                },
                 // 加权随机选择方法
                 getWeightedRandom(files) {
                     // 过滤掉权重为0的文件,确保它们不被选中