启用视频截图: 加入对网页全屏和全屏模式下播放器的支持

[mikelei8291]

更改内容

1. 调整了截图列表的 z-index 使其能显示在网页全屏的播放器前面
2. 将截图列表元素的添加位置改为播放器元素内以支持在全屏模式下的显示
3. 调整了截图列表的布局以免被网站 header 覆盖或者覆盖网页全屏/全屏模式下的播放器控制栏

已知问题

1. 在网页全屏/全屏模式下滚动截图列表会触发播放器的音量调整功能，经过尝试发现有可能是被 .bpx-player-container 元素上的 mouseenter/mouseleave 监听器所触发，尝试在截图列表元素上对这两个事件使用 event.stopPropagation() 阻止 bubble-up，但是并未达到期望中的效果，音量调整功能仍被触发。

[the1812]

• 能做成个选项吗, 我记得有人不希望挡住全屏所以特意比网页全屏低层级的
• 代码看起来只支持 3.x 播放器, 在 2.x 播放器页面 (比如稍后再看播放) 是不是就不行了?

[mikelei8291]

• 可以做成选项，但是在网页全屏模式下如果进行截图的话，不把截图列表显示出来是否不符合交互逻辑？因为点击截图按钮后截图只会显示在截图列表里，并不会有任何的自动操作（比如自动保存），而如果想要与截图进行交互就必须让截图列表显示出来。此时用户为何会不想在当前播放器状态下看到截图列表，而要多一个动作返回播放器的默认状态再去操作呢？
• 我确实忘了给 2.x 播放器页面做适配，会进行适配的

[the1812]

连续多次截图, 不希望列表挡住视频

[mikelei8291]

理解，那么你觉得这个选项是默认启用还是禁用好呢？

[the1812]

禁用吧

[mikelei8291]

我又回来更新了，测试了一下 2.x 的播放器是直接适配了的，可以正常使用，只是因为 2.x 界面的 header bar 高度和 3.x 不同（2.x: 56px, 3.x: 64px），导致截图列表在 2.x 界面的顶部会离 header bar 的底部多 8px，我觉得是可有可无了，如果追求完美确实可以改，就是不知道能不能直接在 CSS 里面区分 2.x 和 3.x 的界面。

另外关于不希望截图列表挡住视频，那么在网页全屏/全屏的情况下点击截图按钮或者按下快捷键后如何确认截图成功了呢？感觉还是得显示出来，如果觉得挡住可以直接点击保存或删除。

如果实在是不想视频被挡住（其实也就右边一点地方），还有两种方案供参考：

1. 网页全屏/全屏模式下的截图列表增加透明度，使其下方的内容可被看到，鼠标移动到上面后恢复不透明状态
2. 网页全屏/全屏模式下截图后弹出截图几秒后自动隐藏到右侧，鼠标靠近右侧后滑出截图列表（类似“自动隐藏侧栏”组件的功能）

[the1812]

两种方案都不错, 或者也可以像调音量一样在播放器中间显示一个小提示, 看你喜欢哪种了

[mikelei8291]

功能性上应该是 2 比较好，但是 1 实现起来比较简单（只需要改 CSS）。说到调音量，你对已知问题里的那一条有什么想法吗？我昨天看到有个组件是禁用滚轮调节音量的，或许可以参考一下实现？另外我发现在“稍后再看”播放页面这个组件本身就没有起作用，截图按钮都没显示，应该要修一下。

[the1812]

稍后再看那边原本是可以的, 只是最近 #3916 的缘故失效了

滚轮的问题可以看下 禁止滚轮调音量 的实现原理

preventEvent(unsafeWindow, 'mousewheel', () => {
  const isFullscreen = [
    'player-mode-webfullscreen',
    'player-fullscreen-fix',
    'player-full-win',
  ].some(token => document.body.classList.contains(token))
  return isFullscreen
})

我估计阻止掉截图列表的 mousewheel 冒泡应该可以解决