[FR] CC字幕底边距以视频底边为准

[zjns]

目前B站的CC字幕底边距是以屏幕底边为准偏移，导致在mac上大部分视频全屏时由于高度不能撑满屏幕而出现字幕一半架在视频上，很难看，所以询问是否有办法修改字幕底边距以视频底边为准。如图所示：

[festoney8]

看起来是非 16:9 屏幕全屏播放 16:9 视频的现象，请问网页全屏时也会这样吗？

[zjns]

一样也有这个问题，很久前给客服反馈，并没有什么卵用，所以才来此求助。

[festoney8]

试一下用 Stylus 插件给播放页新增下方样式，数值可自行调节

.bpx-player-container:is([data-screen="web"], [data-screen="full"]) .bpx-player-subtitle-panel-position[data-position=bottom] {
    bottom: 8% !important
}

---

后续会新增更多 CC 字幕相关功能（估计要在下一个大版本做成后再加入了）

[zjns]

感谢，可以调整字幕初始偏移了，但好像还是以页面底边为描点调整的，不同比例的视频全屏后相对位置还是不太一样

[festoney8]

感谢，可以调整字幕初始偏移了，但好像还是以页面底边为描点调整的，不同比例的视频全屏后相对位置还是不太一样

因为有时视频上下贴紧浏览器，但有时可能是左右贴紧浏览器上下有黑边，所以会有差别

精细调节可以写成下方这样，从视频横向中轴开始计算位置

/* 网页全屏 */
.bpx-player-container[data-screen="web"] .bpx-player-subtitle-panel-position[data-position=bottom] {
    bottom: calc(50% - 300px) !important;
}

/* 全屏 */
.bpx-player-container[data-screen="full"] .bpx-player-subtitle-panel-position[data-position=bottom] {
    bottom: calc(50% - 330px) !important;
}

[zjns]

emm 效果还是不太好，没有办法拿到当前视频内容的底边位置然后基于此偏移吗？

[festoney8]

JS 获取当前视频底边位置特别麻烦，要考虑页面变动之类，能用 CSS 解决尽可能不用 JS

试试这段样式，所有 16:9 的视频可以强制固定字幕位置在视频内，开网页全屏后，随意调整浏览器大小都没问题，但竖屏视频、4:3 视频和 21:9 视频会出问题

:root {
    --subtitle-bottom: 14px;
}
.bpx-player-container:is([data-screen="web"], [data-screen="full"]) .bpx-player-subtitle-panel-position[data-position=bottom] {
    bottom: calc(50% - 0.5 * min(100vw / 16 * 9, 100vh) + var(--subtitle-bottom)) !important;
}

[zjns]

好的，谢谢，我试试看