上网课怎么同时看两个视频：网课与演示视频对照的操作步骤

2026年11月11日 · 约 4 分钟读完

可以。装上 Crispip 后，在网课和参考视频的标签页各点一次扩展图标，两个视频就进同一个悬浮窗并排播放，各自独立控制。

为什么上网课会需要同时看两个视频

不是每节课都要开两个窗口，但下面这几种情况，来回切标签页的成本会明显上来。

录播课配实操演示

老师讲一步、画面切到软件界面，你想跟着做。把录播停在某一步，另开一个演示视频对着看，比记完笔记再倒回去省事；暂停在哪一帧、照着做哪一步，都能对上。

课程配字幕或翻译视频

外语课、英文原声的技术课，正片和字幕常常是两个文件。来回切会漏句子；两路同屏，眼睛不用离开画面就能对上时间点。

直播课配提前录好的资料

直播正在讲，手边还有预习录播或操作回放。直播间倒不回去，录播可以；两路都开着，听到不懂的地方直接在另一路里找。

原生 Chrome 画中画在这个场景下卡在哪

Chrome 自带画中画只解决「切走标签页，视频还在播」，没解决「两个视频放一起」。一个画中画窗口只承载一个 video 元素：同一页再开一路会顶掉原来那路，换个标签页开则多出一个浮窗，两个窗口默认叠在同一位置、互相遮挡。

原生画中画一个窗口只装一个视频，第二个要么顶掉第一个，要么叠在它上面，做不到并排。

开始前的准备

先确认这几件事，后面的步骤才走得顺。

• Chrome 116 或更高版本。Crispip 依赖 Document Picture-in-Picture API，据 Chrome for Developers 的文档，该接口自 Chrome 116 起提供。
• 装好 Crispip 并固定到工具栏，安装入口在 Chrome 应用商店。图标上的橙红数字就是当前标签页的视频数，没有角标通常说明这一页还没加载出视频。
• 两个视频各开一个标签页，并都先播放一下——视频要真的在页面里，扩展才找得到。
• 免费版够用：免费档同时最多放 2 个视频，用的正是宫格布局。

操作步骤：把两个视频放进同一个画中画窗口

第一次用多一步「开启窗口」，之后就是点图标、加视频的循环。

1. 打开网课标签页，让视频出现在页面上 → 工具栏的 Crispip 图标出现橙红角标。
2. 点一下工具栏上的 Crispip 图标 → 新开一个「画中画」标签页，提示按回车；这个标签页会被自动固定到最左边。
3. 在该标签页按回车，或点「开启画中画」按钮 → 弹出独立的悬浮小窗。浏览器要求这一步必须由你亲手触发。
4. 看悬浮窗里有没有画面 → 有，说明网课视频进来了；没有就回网课标签页再点一次图标。
5. 新开标签页，打开参考或字幕视频并播放 → 这一页也有了视频，图标同样带角标。
6. 在这个标签页点 Crispip 图标 → 第二个视频进入同一个悬浮窗，两路按宫格并排。若该页有两个以上视频，会先弹出「选择一个视频」的列表。
7. 拖窗口顶部标题栏移动，拖窗口四角改大小 → 摆到屏幕一侧，另一侧留给笔记。

两个视频的独立控制与布局调整

两路各有各的控制条，暂停一路不会带走另一路。

• 单独暂停：鼠标移到某一路画面上，底部浮出控制条，点最左边的播放键只作用于这一路。
• 单独拖进度：控制条下方那条进度条属于这一路，拖动只改这一路。
• 单独调音量：喇叭图标和滑块只调这一路，不想听哪一路就静音它。
• 调倍速：点最右边的「⋮」选 0.5x 到 2.0x，同样只作用于这一路。
• 集体暂停：在悬浮窗里按空格，所有画面一起暂停，再按一次继续。
• 换布局：悬浮窗里点右键，选「布局」→「宫格布局」。免费版用宫格；「右L布局」「左L布局」「双边布局」和「影院模式」属于专业版。
• 让某一路占满：点控制条上的「铺满」，再点一次退出。
• 截图与录屏（专业版）：控制条上的相机和录制按钮可截当前帧或录一段。

画面停住不动时，先回原网页点一下播放——浏览器对自动播放有手势要求，扩展代替不了。

常见问题

第一次装完不知道从哪下手？先看快速上手；想确认档位与价格，去定价页。

技术描述参考 MDN 的 Picture-in-Picture API 文档 与 Chrome for Developers 的 Document Picture-in-Picture 文档； 产品能力、免费档上限与安装入口以 Chrome 应用商店详情页为准，隐私口径见隐私政策。