图片轮播切到视频后左右键失效 #57

New Issue

2026-11-05T05:18:58Z

laoyang commented

2026-11-05 05:18:58 +00:00

图片轮播切到视频后左右键失效

用户（2026-11-05）

「行程里面图片轮播的时候，切换到视频，上下左右键就失效了。」

根因

preview.js 的键盘处理：

function isImage() {
  return items[cur] && (items[cur].getAttribute('data-prev') || '') === 'image';
}

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowLeft' && isImage()) { step(-1); }
  if (e.key === 'ArrowRight' && isImage()) { step(1); }
});

左右键只在当前是图片时才生效。 切到视频后 isImage() 返回 false
⇒ 两个分支都进不去 ⇒ 翻不动。

当初为什么这么写

代码注释留着原因：

「视频/PDF 里方向键另有含义，不能抢」

这个顾虑是对的：

位置	左右键的含义
视频播放中	快退 / 快进
PDF iframe	自己的翻页
图片轮播	上一张 / 下一张

但当时的解法是全局一刀切禁掉，而不是"看焦点在哪"。

修法：看事件目标

/** 按键是否发生在媒体控件内部（视频 / PDF iframe） */
function inMediaControl(t) {
  if (!t || !t.closest) { return false; }
  return !!t.closest('video, iframe');
}

document.addEventListener('keydown', function (e) {
  if (box.hidden) { return; }
  if (e.key === 'Escape') { close(); return; }

  // 焦点在视频/PDF 控件里 → 放行给控件
  if (inMediaControl(e.target)) { return; }

  // 其余情况 → 照常翻页（不再限制只有图片）
  if (e.key === 'ArrowLeft')  { e.preventDefault(); step(-1); return; }
  if (e.key === 'ArrowRight') { e.preventDefault(); step(1);  }
});

行为矩阵

场景	左右键
焦点在 `<video>` 里（点了播放）	视频快退/快进（不被抢）
焦点在 PDF iframe 里	PDF 自己翻页（不被抢）
焦点在页面其他地方	上一张 / 下一张
当前是视频但没聚焦	上一张 / 下一张（原来的 bug 就在这）

⚠️ 上下键保持不处理：页面滚动、视频音量另有含义，抢了会别扭。

验收

图片之间左右键正常翻
从图片翻到视频，再按左右键能继续翻
点视频播放后，左右键是快退/快进
点视频外面，左右键又能翻页
PDF 里左右键是 PDF 自己翻页

备注

用户 2026-11-05 重申流程：「所有改动都需要建工单。如果是新的，就新建工单；
如果是之前功能的修改，就在工单下面进行评论。」

本单是新的交互问题，不属于 #52（视频黑屏）/#56（压缩参数）的延续：
那两个是"视频播不了"，本单是"能播了之后键盘不响应"。

为什么单独建单

#52 是视频播不了（304/Range 冲突 + HEVC 编码），#56 是压缩参数误加到视频上导致播不了。本单是「视频已经能播了之后，键盘不响应」——属于交互层问题，不是播放能力问题。

# 图片轮播切到视频后左右键失效 ## 用户（2026-11-05） > 「行程里面图片轮播的时候，切换到视频，上下左右键就失效了。」 ## 根因 `preview.js` 的键盘处理： ```javascript function isImage() { return items[cur] && (items[cur].getAttribute('data-prev') || '') === 'image'; } document.addEventListener('keydown', function (e) { if (e.key === 'ArrowLeft' && isImage()) { step(-1); } if (e.key === 'ArrowRight' && isImage()) { step(1); } }); ``` **左右键只在当前是图片时才生效。** 切到视频后 `isImage()` 返回 false ⇒ 两个分支都进不去 ⇒ 翻不动。 ## 当初为什么这么写代码注释留着原因： > 「视频/PDF 里方向键另有含义，不能抢」这个顾虑是**对的**： | 位置 | 左右键的含义 | |---|---| | 视频播放中 | 快退 / 快进 | | PDF iframe | 自己的翻页 | | 图片轮播 | 上一张 / 下一张 | 但当时的解法是**全局一刀切禁掉**，而不是"看焦点在哪"。 ## 修法：看事件目标 ```javascript /** 按键是否发生在媒体控件内部（视频 / PDF iframe） */ function inMediaControl(t) { if (!t || !t.closest) { return false; } return !!t.closest('video, iframe'); } document.addEventListener('keydown', function (e) { if (box.hidden) { return; } if (e.key === 'Escape') { close(); return; } // 焦点在视频/PDF 控件里 → 放行给控件 if (inMediaControl(e.target)) { return; } // 其余情况 → 照常翻页（不再限制只有图片） if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); return; } if (e.key === 'ArrowRight') { e.preventDefault(); step(1); } }); ``` ### 行为矩阵 | 场景 | 左右键 | |---|---| | 焦点在 `<video>` 里（点了播放） | 视频快退/快进（**不被抢**） | | 焦点在 PDF iframe 里 | PDF 自己翻页（**不被抢**） | | 焦点在页面其他地方 | 上一张 / 下一张 | | 当前是视频但没聚焦 | **上一张 / 下一张**（原来的 bug 就在这） | ⚠️ 上下键**保持不处理**：页面滚动、视频音量另有含义，抢了会别扭。 ## 验收 - [ ] 图片之间左右键正常翻 - [ ] **从图片翻到视频，再按左右键能继续翻** - [ ] 点视频播放后，左右键是快退/快进 - [ ] 点视频外面，左右键又能翻页 - [ ] PDF 里左右键是 PDF 自己翻页 ## 备注用户 2026-11-05 重申流程：「所有改动都需要建工单。如果是新的，就新建工单；如果是之前功能的修改，就在工单下面进行评论。」本单是**新的交互问题**，不属于 #52（视频黑屏）/#56（压缩参数）的延续：那两个是"视频播不了"，本单是"能播了之后键盘不响应"。 --- ### 为什么单独建单 #52 是视频播不了（304/Range 冲突 + HEVC 编码），#56 是压缩参数误加到视频上导致播不了。本单是「视频已经能播了之后，键盘不响应」——属于交互层问题，不是播放能力问题。

laoyang referenced this issue from a commit

2026-11-05 05:19:07 +00:00

图片轮播切到视频后左右键失效 (#57)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: laoyang/FamilyBook#57