オンライン授業で動画を2本同時に見る方法

2026年11月11日 · 約 6 分で読めます

できます。Crispip を入れて、授業のタブと参考動画のタブでそれぞれツールバーのアイコンを 1 回ずつクリックすると、2 本の動画が 1 つのフローティングウィンドウに並んで再生され、それぞれ独立して操作できます。

オンライン授業で動画 2 本が必要になる理由

どの授業でも 2 つのウィンドウが要るわけではありませんが、次のような場面ではタブを行き来する手間が実際に効いてきます。

録画授業と操作デモを並べる

先生が手順を説明し、画面がソフトに切り替わる。自分でも同じことをしたい。録画をその手順で止めて、隣にデモ動画を開いておけば、メモを取って後から巻き戻すより楽ですし、どのコマがどの操作に対応するかも一目で分かります。

授業と字幕・翻訳動画を並べる

語学の授業や英語の技術解説では、本編と字幕が別ファイルになっていることがよくあります。タブを切り替えると文を取りこぼしますが、2 画面を同時に出しておけば視線は画面から離れません。

ライブ配信と事前に録った資料を並べる

配信が進む一方で、手元には予習の録画や操作の再現があります。ライブは巻き戻せませんが、録画は戻せます。両方開いておき、分からないところが出たらすぐもう一方を見れば済みます。

Chrome 標準のピクチャーインピクチャーが届かないところ

標準のピクチャーインピクチャーが解くのは 1 つだけです。タブを切り替えても動画が流れ続けること。動画 2 本を一緒に置くことは解きません。1 つのウィンドウが載せられる video 要素はちょうど 1 つで、同じページで 2 つ目を開けば 1 つ目と入れ替わり、別のタブから開けば同じ位置に重なるウィンドウがもう 1 つ増えるだけです。

標準のピクチャーインピクチャーは 1 ウィンドウに 1 本しか載せられず、2 本目は 1 本目と入れ替わるか上に重なるだけで、横に並ぶことはありません。

始める前の準備

次の 4 点を確認しておくと、手順がすんなり進みます。

• Chrome 116 以降。Crispip は Document Picture-in-Picture API を使います。Chrome for Developers のドキュメントによれば、この API は Chrome 116 から提供されています。
• Crispip を入れてツールバーに固定。導入は Chrome ウェブストアから。アイコンのオレンジがかった赤い数字は、そのタブにある動画の本数です。数字が出ていなければ、ページがまだ動画を読み込んでいない可能性が高いです。
• 2 本の動画をそれぞれ別のタブで開き、どちらも一度再生しておきます。動画が実際にページ内に存在しないと、拡張機能は見つけられません。
• 無料プランで足ります。同時に 2 本まで置けて、グリッドのレイアウトも含まれています。

手順：2 本の動画を 1 つのウィンドウに入れる

初回だけウィンドウを開く手順が増えますが、それ以降はアイコンを押して動画を足すだけです。

1. 授業のタブを開き、動画が表示されるまで待つ → ツールバーの Crispip アイコンにオレンジがかった赤いバッジが出ます。
2. ツールバーの Crispip アイコンをクリック → 新しい PiP タブが開き、Enter を押すよう案内されます。このタブは自動でタブバーの左端に固定されます。
3. そのタブで Enter を押すか「PiPを開始」をクリック → 独立したフローティングウィンドウが出ます。この操作は実際のクリックからしか行えず、拡張機能が代わりに押すことはできません。
4. ウィンドウに映像が出ているか確認 → 出ていれば授業の動画は入っています。出ていなければ授業のタブに戻り、もう一度アイコンをクリックします。
5. 新しいタブで参考動画や字幕動画を開いて再生 → このページにも動画が入り、アイコンにまた数字が出ます。
6. そのタブで Crispip アイコンをクリック → 2 本目が同じウィンドウに入り、グリッドで並びます。ページに動画が複数ある場合は、先に選ぶための一覧が出ます。
7. タイトルバーでウィンドウを動かし、四隅で大きさを変える → 画面の片側に置き、反対側はメモ用に空けておきます。

動画ごとの操作とレイアウト

映像ごとに操作バーがあり、片方を止めてももう片方は止まりません。

• 1 本だけ一時停止：映像にカーソルを乗せると下に操作バーが出ます。左端の再生ボタンはその動画だけに効きます。
• 1 本だけシーク：操作バーの下の進捗バーはその動画専用です。
• 音量を個別に：スピーカーのアイコンとスライダーはその動画だけに効きます。聞きたくない方はミュートにします。
• 速度を変える：右端の ⋮ を開き、0.5x から 2.0x までを選びます。これもその動画だけです。
• まとめて止める：ウィンドウ内でスペースキーを押すと全映像が止まり、もう一度押すと再開します。
• レイアウトを変える：ウィンドウ内で右クリックし、「レイアウト」→「グリッド」を選びます。無料プランはグリッドで、右L・左L・両側・メニュー上部のシアターモードは PRO の機能です。
• 1 本をウィンドウいっぱいに：操作バーの「ウィンドウ全体」を押すと広がり、もう一度押すと戻ります。
• スクリーンショットと録画（PRO）：操作バーのカメラと録画のボタンで、そのコマや一部分を保存できます。

映像が止まったままのときは、元のページに戻って再生を押してください。ブラウザは実際のユーザー操作を要求するので、拡張機能が代わりを務めることはできません。

よくある質問

入れたあと何から始めるか迷ったらクイックスタートへ。プランと価格は料金のセクションで確認できます。

技術的な記述は MDN の Picture-in-Picture API のドキュメントと Chrome for Developers の Document Picture-in-Picture のドキュメントに基づきます。 機能、無料プランの上限、導入リンクはChrome ウェブストアの掲載ページによるもので、データの取り扱いはプライバシーポリシーに記載しています。