上網課怎麼同時看兩個影片：課程與示範影片對照的操作步驟

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 圖示 → 開出一個新的「畫中畫」標籤頁，提示按 Enter；這個標籤頁會自動釘到最左邊。
3. 在該標籤頁按 Enter，或點「開啟畫中畫」按鈕 → 彈出獨立的懸浮小視窗。瀏覽器要求這一步必須由你親手觸發。
4. 看懸浮視窗裡有沒有畫面 → 有，代表網課影片已經進來了；沒有就回網課標籤頁再點一次圖示。
5. 新開一個標籤頁，打開參考或字幕影片並播放 → 這一頁也有了影片，圖示同樣帶角標。
6. 在這個標籤頁點 Crispip 圖示 → 第二個影片進入同一個懸浮視窗，兩路依宮格並排。若該頁有兩個以上影片，會先彈出清單讓你選。
7. 拖視窗頂部標題列移動，拖視窗四角改大小 → 擺到螢幕一側，另一側留給筆記。

兩個影片的獨立控制與版面調整

兩路各有各的控制列，暫停一路不會帶走另一路。

• 單獨暫停：滑鼠移到某一路畫面上，底部浮出控制列，點最左邊的播放鍵只作用於這一路。
• 單獨拖進度：控制列下方那條進度列屬於這一路，拖動只改這一路。
• 單獨調音量：喇叭圖示和滑桿只調這一路，不想聽哪一路就把它靜音。
• 調倍速：點最右邊的「⋮」選 0.5x 到 2.0x，同樣只作用於這一路。
• 集體暫停：在懸浮視窗裡按空白鍵，所有畫面一起暫停，再按一次繼續。
• 換版面：在懸浮視窗裡點右鍵，選「佈局」→「宮格佈局」。免費版用宮格；「右L佈局」「左L佈局」「雙邊佈局」和「影院模式」屬於專業版。
• 讓某一路佔滿：點控制列上的「鋪滿」，再點一次退出。
• 截圖與錄影（專業版）：控制列上的相機和錄影按鈕可以截取目前畫面或錄一段。

畫面停住不動時，先回原網頁點一下播放——瀏覽器對自動播放有手勢要求，擴充功能代替不了。

常見問題

第一次裝完不知道從哪下手？先看快速上手；想確認方案與價格，去定價頁。

技術描述參考 MDN 的 Picture-in-Picture API 文件與 Chrome for Developers 的 Document Picture-in-Picture 文件； 產品能力、免費方案上限與安裝入口以 Chrome 應用程式商店頁面為準，隱私口徑見隱私權政策。