前言
刷B站时，有些视频就想边放边看看评论区。往下滑到评论区，视频会以画中画的形式显示，但太小了，也看不了弹幕。
于是我想到，模仿油管，在全屏模式下放置一个按钮可以呼出评论区，显示在右侧。
实现的效果如下：
这个功能只在网页全屏模式下显示，点击按钮启用，再次点击恢复原样。
安装
前提-安装油猴插件
以Windows自带的Edge浏览器为例：
在浏览器右上角点击扩展按钮，选择菜单里的[ 获取Microsoft Edge扩展 ]，然后搜索“篡改猴”，点击获取安装。
安装脚本
方法一：从脚本仓库安装
脚本文件我已经上传到了GreasyFork (油叉)，可以在上面找到B站网页全屏模式显示评论区（播放器下方按钮点击启用），点击安装即可。
如果网络问题无法打开该网站，那么就可以尝试方法二。
方案二：自定义脚本
在右上角找到油猴的图标，点击弹出菜单，再点击添加新脚本。
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
| // ==UserScript==
// @name B站网页全屏模式显示评论区（播放器下方按钮点击启用）
// @namespace https://magiku.github.io/
// @version 1.2
// @description 全屏时在控制栏添加评论按钮，点击后视频左移、评论区嵌入播放器右侧，并强制重载评论
// @match https://www.bilibili.com/video/*
// @author magiku
// @grant none
// @license MIT
// @icon https://www.bilibili.com/favicon.ico
// @downloadURL https://update.greasyfork.org/scripts/593725/B%E7%AB%99%E7%BD%91%E9%A1%B5%E5%85%A8%E5%B1%8F%E6%A8%A1%E5%BC%8F%E6%98%BE%E7%A4%BA%E8%AF%84%E8%AE%BA%E5%8C%BA%EF%BC%88%E6%92%AD%E6%94%BE%E5%99%A8%E4%B8%8B%E6%96%B9%E6%8C%89%E9%92%AE%E7%82%B9%E5%87%BB%E5%90%AF%E7%94%A8%EF%BC%89.user.js
// @updateURL https://update.greasyfork.org/scripts/593725/B%E7%AB%99%E7%BD%91%E9%A1%B5%E5%85%A8%E5%B1%8F%E6%A8%A1%E5%BC%8F%E6%98%BE%E7%A4%BA%E8%AF%84%E8%AE%BA%E5%8C%BA%EF%BC%88%E6%92%AD%E6%94%BE%E5%99%A8%E4%B8%8B%E6%96%B9%E6%8C%89%E9%92%AE%E7%82%B9%E5%87%BB%E5%90%AF%E7%94%A8%EF%BC%89.meta.js
// ==/UserScript==
(function() {
'use strict';
const CONFIG = {
playerSelector: '#bilibili-player',
videoWrapSelector: '.bpx-player-video-wrap',
commentSelector: '#commentapp',
controlRightSelector: '.bpx-player-control-bottom-right',
//评论区占比大小
commentWidth: '35%',
pollInterval: 500,
};
let isFullscreen = false;
let isEmbedded = false;
let toggleBtn = null;
let commentContainer = null;
let originalParent = null;
let originalNextSibling = null;
let originalVideoStyle = {};
let pollTimer = null;
let controlObserver = null;
let embeddedCommentApp = null;
let lastUrl = location.href;
let lastVideoId = getVideoIdFromUrl(lastUrl);
function getVideoIdFromUrl(url) {
try {
const u = new URL(url);
const path = u.pathname;
const match = path.match(/\/video\/([^\/\?]+)/);
if (match && match[1]) {
return match[1];
}
return null;
} catch (e) {
return null;
}
}
function getPlayer() {
return document.querySelector(CONFIG.playerSelector);
}
function getVideoWrap() {
let el = document.querySelector(CONFIG.videoWrapSelector);
if (!el) {
const player = getPlayer();
if (player) {
el = player.querySelector('.bpx-player-video-wrap') ||
player.querySelector('.bilibili-player-video-wrap');
}
}
return el;
}
function getCommentApp() {
return document.querySelector(CONFIG.commentSelector);
}
function getControlRight() {
return document.querySelector(CONFIG.controlRightSelector);
}
function detectFullscreen() {
const player = getPlayer();
if (!player) return false;
if (player.classList.contains(CONFIG.fullscreenClass)) return true;
const container = player.querySelector('.bpx-player-container');
if (container && container.getAttribute('data-screen') === 'web') return true;
return false;
}
function reloadComments(commentApp) {
try {
const biliComments = commentApp.querySelector('bili-comments');
if (biliComments) {
const lazy = biliComments.getAttribute('lazy-load');
biliComments.removeAttribute('lazy-load');
void biliComments.offsetHeight;
biliComments.setAttribute('lazy-load', lazy || 'true');
if (typeof biliComments.reload === 'function') {
biliComments.reload();
}
} else {
window.dispatchEvent(new Event('resize'));
}
} catch (e) {}
}
function cleanup() {
isEmbedded = false;
commentContainer = null;
originalParent = null;
originalNextSibling = null;
originalVideoStyle = {};
embeddedCommentApp = null;
}
function forceCleanupEmbed() {
if (commentContainer && commentContainer.parentNode) {
if (embeddedCommentApp && embeddedCommentApp.parentNode === commentContainer) {
embeddedCommentApp.remove();
}
commentContainer.remove();
}
const player = getPlayer();
const videoWrap = getVideoWrap();
if (player) {
player.style.display = '';
player.style.flexDirection = '';
player.style.alignItems = '';
}
if (videoWrap) {
videoWrap.style.width = originalVideoStyle.width || '';
videoWrap.style.flex = originalVideoStyle.flex || '';
}
cleanup();
}
function doEmbed(player, videoWrap, commentApp) {
try {
if (isEmbedded && embeddedCommentApp !== commentApp) {
forceCleanupEmbed();
player = getPlayer();
videoWrap = getVideoWrap();
commentApp = getCommentApp();
if (!player || !videoWrap || !commentApp) return;
}
if (!originalParent) {
originalParent = commentApp.parentNode;
originalNextSibling = commentApp.nextSibling;
}
originalVideoStyle = {
width: videoWrap.style.width,
flex: videoWrap.style.flex,
};
commentContainer = document.createElement('div');
commentContainer.id = 'embedded-comment-container';
commentContainer.style.cssText = `
width: ${CONFIG.commentWidth};
height: 100%;
overflow-y: auto;
background: #ffffff;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 10px;
color: #fff;
`;
player.style.display = 'flex';
player.style.flexDirection = 'row';
player.style.alignItems = 'stretch';
player.appendChild(commentContainer);
commentContainer.appendChild(commentApp);
embeddedCommentApp = commentApp;
isEmbedded = true;
reloadComments(commentApp);
commentContainer.style.display = 'none';
requestAnimationFrame(() => {
commentContainer.style.display = 'inline-block';
});
} catch (e) {}
}
function embedComments(force = false) {
if (isEmbedded && !force) return;
const player = getPlayer();
const videoWrap = getVideoWrap();
let commentApp = getCommentApp();
if (!player || !videoWrap || !commentApp) {
let attempts = 0;
const maxAttempts = 20;
const interval = setInterval(() => {
attempts++;
const p = getPlayer();
const vw = getVideoWrap();
const ca = getCommentApp();
if (p && vw && ca) {
clearInterval(interval);
doEmbed(p, vw, ca);
} else if (attempts >= maxAttempts) {
clearInterval(interval);
}
}, 500);
return;
}
doEmbed(player, videoWrap, commentApp);
}
function restoreComments() {
if (!isEmbedded) return;
try {
const player = getPlayer();
const videoWrap = getVideoWrap();
const commentApp = getCommentApp();
if (!player || !videoWrap || !commentApp || embeddedCommentApp !== commentApp) {
forceCleanupEmbed();
return;
}
videoWrap.style.width = originalVideoStyle.width || '';
videoWrap.style.flex = originalVideoStyle.flex || '';
if (originalParent) {
if (originalNextSibling) {
originalParent.insertBefore(commentApp, originalNextSibling);
} else {
originalParent.appendChild(commentApp);
}
} else {
const fallback = document.querySelector('#viewbox') || document.body;
fallback.appendChild(commentApp);
}
if (commentContainer && commentContainer.parentNode) {
commentContainer.remove();
}
player.style.display = '';
player.style.flexDirection = '';
player.style.alignItems = '';
cleanup();
} catch (e) {}
}
function safeRestoreComments() {
if (!isEmbedded) return;
const commentApp = getCommentApp();
const videoWrap = getVideoWrap();
const player = getPlayer();
if (!commentApp || !videoWrap || !player || commentApp !== embeddedCommentApp) {
forceCleanupEmbed();
} else {
restoreComments();
}
}
function toggleEmbed() {
try {
if (isEmbedded) {
restoreComments();
} else {
embedComments(true);
}
} catch (e) {}
}
function createCommentButton() {
if (toggleBtn) return;
const controlRight = getControlRight();
if (!controlRight) return;
toggleBtn = document.createElement('div');
toggleBtn.className = 'bpx-player-ctrl-btn bpx-player-ctrl-comment';
toggleBtn.setAttribute('role', 'button');
toggleBtn.setAttribute('aria-label', '内嵌评论');
toggleBtn.tabIndex = 0;
toggleBtn.style.cssText = 'margin-top: 5px;';
const iconSpan = document.createElement('span');
iconSpan.className = 'bpx-player-ctrl-btn-icon';
iconSpan.innerHTML = `<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 8H17M7 11H17M7 14H11M14.8284 18H19C20.1046 18 21 17.1046 21 16V6C21 4.89543 20.1046 4 19 4H5C3.89543 4 3 4.89543 3 6V16C3 17.1046 3.89543 18 5 18H8.18767C9.18859 18 10 18.8114 10 19.8123V19.8123C10 20.6196 10.9761 21.0239 11.5469 20.4531L13.4142 18.5858C13.7893 18.2107 14.298 18 14.8284 18Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>`;
toggleBtn.appendChild(iconSpan);
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
toggleEmbed();
});
controlRight.prepend(toggleBtn);
}
function removeCommentButton() {
if (toggleBtn && toggleBtn.parentNode) {
toggleBtn.remove();
toggleBtn = null;
}
}
function onFullscreenChange() {
const nowFull = detectFullscreen();
if (nowFull && !isFullscreen) {
isFullscreen = true;
createCommentButton();
if (!toggleBtn) observeControlRight();
} else if (!nowFull && isFullscreen) {
isFullscreen = false;
if (isEmbedded) restoreComments();
removeCommentButton();
if (controlObserver) {
controlObserver.disconnect();
controlObserver = null;
}
}
}
function observeControlRight() {
if (controlObserver) controlObserver.disconnect();
const controlRight = getControlRight();
if (controlRight) {
createCommentButton();
} else {
const waitObserver = new MutationObserver(() => {
const cr = getControlRight();
if (cr) {
waitObserver.disconnect();
createCommentButton();
}
});
waitObserver.observe(document.body, { childList: true, subtree: true });
setTimeout(() => {
waitObserver.disconnect();
}, 10000);
}
}
function checkUrlChange() {
const currentUrl = location.href;
const currentVideoId = getVideoIdFromUrl(currentUrl);
if (currentVideoId) {
if (currentVideoId !== lastVideoId) {
// 视频ID发生变化 → 刷新
lastVideoId = currentVideoId;
lastUrl = currentUrl;
location.reload();
} else {
// 视频ID相同，但URL可能因分P、参数等不同 → 只更新lastUrl，不刷新
lastUrl = currentUrl;
}
} else {
// 不是视频页面，按原逻辑处理（完整URL不同就刷新）
if (currentUrl !== lastUrl) {
lastUrl = currentUrl;
lastVideoId = null;
location.reload();
}
}
}
function startPolling() {
if (pollTimer) clearInterval(pollTimer);
pollTimer = setInterval(() => {
onFullscreenChange();
checkUrlChange();
}, CONFIG.pollInterval);
}
function init() {
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(evt =>
document.addEventListener(evt, onFullscreenChange)
);
const player = getPlayer();
if (player) {
const classObserver = new MutationObserver(onFullscreenChange);
classObserver.observe(player, { attributes: true, attributeFilter: ['class'] });
} else {
const waitPlayer = new MutationObserver(() => {
const p = getPlayer();
if (p) {
waitPlayer.disconnect();
const obs = new MutationObserver(onFullscreenChange);
obs.observe(p, { attributes: true, attributeFilter: ['class'] });
onFullscreenChange();
}
});
waitPlayer.observe(document.body, { childList: true, subtree: true });
setTimeout(waitPlayer.disconnect.bind(waitPlayer), 15000);
}
startPolling();
setTimeout(onFullscreenChange, 1000);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
|
在弹出的脚本编辑页面，全选删除，再把上面这段脚本代码复制进去，按Ctrl+s进行保存即可。
原理介绍
核心功能
- 视频画面左移，宽度被压缩。
- 评论区嵌入播放器右侧，默认35%的宽度。
- 评论区会强制刷新重载，确保内容正常显示。
再次点击按钮，评论区恢复原位，视频恢复全宽。
- 切换视频，会强制刷新网页，确保侧边评论区不会保持为上一个视频的评论内容
可修改内容
默认评论区占比为35%，如果需要调整，可修改代码中的commentWidth: '35%',，位置大概在20-25行。
默认切换视频会强制刷新网页，不需要这个功能的，可以注释以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| if (currentVideoId) {
if (currentVideoId !== lastVideoId) {
// 视频ID发生变化 → 刷新
lastVideoId = currentVideoId;
lastUrl = currentUrl;
location.reload();
} else {
// 视频ID相同，但URL可能因分P、参数等不同 → 只更新lastUrl，不刷新
lastUrl = currentUrl;
}
} else {
// 不是视频页面，按原逻辑处理（完整URL不同就刷新）
if (currentUrl !== lastUrl) {
lastUrl = currentUrl;
lastVideoId = null;
location.reload();
}
}
|
但需要注意，关闭该功能的话，在保持标签页不动的时候，切换视频（比如右侧推荐的其他视频），评论区的内容不会随着视频的切换而变动。只有手动刷新整个网页才能正常在侧边评论区看到当前视频的评论内容。
代码逻辑
1. 全屏状态的精准捕获（触发条件）
脚本通过三重机制判断是否进入“网页全屏”：
- 监听标准全屏API：监听
fullscreenchange 等事件（兼容各浏览器）。
- 监听播放器CSS类变化：使用
MutationObserver 监控播放器容器（#bilibili-player）的 class 属性变化。
- 兜底轮询（Polling）：每 500ms 执行一次
onFullscreenChange 检查。
- 核心判断依据是播放器容器是否包含
data-screen="web" 属性（B站网页全屏的特征标识）。
- 进入全屏时创建按钮，退出全屏时自动销毁按钮并恢复评论区位置。
2. 评论区的“搬运”与布局重置（核心交互）
点击按钮触发 toggleEmbed，执行 doEmbed 函数：
- 保存现场：在搬运前，保存评论区的
parentNode 和 nextSibling，以便恢复时放回原处。
- 创建容器：动态生成一个
div#embedded-comment-container，设置宽度 35%、白色背景、纵向滚动。
- Flex布局改造：将播放器容器（
#bilibili-player）设为 display: flex + flex-direction: row，使视频容器和评论容器左右并排。
- 强制重载评论：找到评论组件（
bili-comments），移除并重新添加 lazy-load 属性，并调用其内部的 reload() 方法，避免评论因DOM迁移而加载失败。
3. 评论按钮的注入（UI入口）
脚本会定位播放器控制栏的右侧区域（.bpx-player-control-bottom-right），在其内部最前面插入一个自定义的 div 按钮，内嵌一个对话气泡样式的SVG图标。点击该按钮即执行切换逻辑。
4. 页面导航的防冲突处理（SPA特性）
B站视频页面是单页应用（SPA），切换视频不会刷新整个页面。
- 脚本通过
checkUrlChange 每500ms检查当前URL中的视频ID（BV号）。
- 一旦检测到视频ID发生变化，它会直接执行
location.reload() 刷新页面。这是一种“暴力但有效”的策略，用于重置所有脚本状态，防止旧视频的评论DOM残留影响新视频。