Как смотреть два видео одновременно на онлайн-занятии

Да. Установите Crispip и нажмите его значок один раз на вкладке с занятием и один раз на вкладке с опорным видео: оба ролика встанут рядом в одном плавающем окне, каждый со своим управлением.

Зачем на онлайн-занятии два видео одновременно

Не каждому уроку нужны два окна, но в случаях ниже переключение вкладок начинает отнимать реальное время.

Запись лекции рядом с практической демонстрацией

Преподаватель объясняет шаг и переходит в программу. Вы хотите повторить. Остановите запись на этом шаге и держите рядом демонстрационное видео: удобнее, чем записывать и потом отматывать, и сразу видно, какой кадр соответствует какому действию.

Урок рядом с субтитрами или переводом

На языковых курсах и в технических докладах на английском основное видео и субтитры часто лежат двумя отдельными файлами. При переключении вкладок теряются фразы; когда оба изображения на экране, взгляд не уходит с материала.

Прямая трансляция рядом с записанным заранее материалом

Трансляция идёт, а под рукой запись урока или разбор по шагам. Трансляцию не отмотать, запись — можно. Держите открытыми оба окна и заглядывайте во второе, как только что-то стало непонятно.

Где встроенная «картинка в картинке» в Chrome не справляется

Встроенная «картинка в картинке» решает одну задачу: видео продолжает играть, пока вы переключаете вкладки. Задачу «два видео вместе» она не решает. Одно такое окно несёт ровно один элемент video: если открыть второе на той же странице, оно заменит первое, а если открыть его из другой вкладки, появится ещё одно плавающее окно, которое встанет на то же место и закроет первое.

Встроенная «картинка в картинке» вмещает одно видео на окно; второе либо заменяет первое, либо ложится сверху — рядом оно не встаёт.

Подготовка

Проверьте эти четыре пункта, и шаги пройдут гладко.

Шаги: оба видео в одном окне «картинка в картинке»

В первый раз добавляется один шаг — открыть окно. Дальше остаётся нажимать значок и добавлять видео.

  1. Откройте вкладку с занятием и дайте видео загрузиться → на значке Crispip на панели появляется оранжево-красный счётчик.
  2. Нажмите значок Crispip на панели → откроется новая вкладка PiP с просьбой нажать Enter; она автоматически закрепляется у левого края.
  3. На этой вкладке нажмите Enter или кнопку «Запустить PiP» → появится отдельное плавающее окно. Браузер требует, чтобы этот шаг шёл от настоящего клика, поэтому расширение не сделает его за вас.
  4. Проверьте, есть ли в окне изображение → если есть, видео с занятия уже внутри; если нет, вернитесь на вкладку занятия и нажмите значок ещё раз.
  5. Откройте новую вкладку с опорным видео или субтитрами и запустите его → на этой странице тоже появилось видео, а значок снова показывает число.
  6. Нажмите значок Crispip на этой вкладке → второе видео входит в то же окно, оба стоят рядом в сетке. Если на странице больше одного видео, сначала появится список для выбора.
  7. Перетащите окно за заголовок и измените размер за углы → поставьте его к одному краю экрана, другой оставьте под заметки.

Независимое управление и раскладка

У каждого изображения своя панель управления; пауза на одном не трогает другое.

Если изображение замерло, вернитесь на исходную страницу и нажмите воспроизведение там: браузеры требуют настоящего жеста пользователя, и расширение его не заменит.

Частые вопросы

Звук от двух видео смешается?

Да, каждое играет свой звук. Выключите звук у ненужного на его панели или щёлкните правой кнопкой и выберите «Выключить звук у остальных», чтобы осталась одна дорожка.

Платформы курсов это разрешают?

Зависит от правил конкретной платформы — их и соблюдайте. Решение лишь собирает в одном окне видео, которое вы и так можете воспроизвести; оно не снимает ограничения платформы и не предназначено для записи или распространения материалов курса.

Хватит бесплатного плана?

Да. Он допускает до 2 видео одновременно — ровно столько нужно здесь, — и включает сетку и управление каждым видео по отдельности.

Не знаете, с чего начать после установки? Загляните в краткое руководство; тарифы и цены — в разделе с ценами.

Технические описания опираются на документацию Picture-in-Picture API от MDN и документацию Document Picture-in-Picture от Chrome for Developers. Возможности продукта, лимит бесплатного плана и ссылка на установку взяты из карточки в Chrome Web Store; обработка данных описана в политике конфиденциальности.