Как включить новый режим «Картинка в картинке» в Google Chrome
Google работает над созданием нового режима «картинка в картинке» для Google Chrome на основе API W3C. Пользователи браузера Chrome Canaryмогут включить и попробовать новую функцию уже сейчас.
Реализация основана на стандартизованном API для функции «картинка в картинке», которая перемещает видео, воспроизводящееся в браузере, в маленькое окно оверлея, которое действует независимо от главного окна.
Новый API картинок в картинке работает по умолчанию на большинстве сайтов. Apple уже реализовала эту функцию в Safari для Mac OS X и iOS, а Google решил поэкспериментировать на пользователях Chrome Canary, чтобы определить, стоит ли реализовать API в стабильной версии веб-браузера. Обратите внимание, что нынешняя реализация не является суперстабильной, но уже работает на большинстве сайтов с видеоконтентом.
Вот что вам нужно сделать:
Включите экспериментальные настройки
Загрузите следующие три URL в адресную строку браузера Google Chrome и включите флаг эксперимента в Chrome Canary. Я предлагаю вам включить все три и только после этого перезапустить Chrome (браузер просит вас перезагрузиться, когда вы изменяете статус любого из трех параметров).
- chrome://flags/#enable-experimental-web-platform-features — включает возможности экспериментальной веб-платформы, которые находятся в разработке.
- chrome://flags/#enable-surfaces-for-videos — включает композицию на Surface вместо VideoLayer для видео.
- chrome://flags/#enable-picture-in-picture — включает функцию Picture-in-Picture для видео.
Установите экспериментальное расширение
Загрузите следующий файл из GitHub и распакуйте. Он включает в себя расширение для Google Chrome, которое при установке разблокирует реализацию режима «картинка в картинке» в веб-браузере.
Загрузите chrome://extensions и включите «Режим разработчика». В нём появится возможность загрузки расширений с жёсткого диска.
Выберите «load unpacked» и выберите недавно распакованный файл расширения.
После установки на панели инструментов появится соответствующий значок.
Как использовать режим «картинка в картинке» в Chrome
Активируйте значок расширения одним щелчком мыши или коснитесь любой страницы с видео, чтобы вывести видео на всплывающее окно «картинка в картинке».
Реализация прямо сейчас имеет несколько ограничений:
- В режиме «картинка в картинке» воспроизводится только первое видео. Следующее видео, если включено автовоспроизведение, не загружается автоматически в режиме, а воспроизводится в главном окне браузера.
- Страница, на которую встроено видео, должна оставаться открытой.
Режим «картинка в картинке» автоматически работает на YouTube, Vimeo и многих других видеосайтах.
Google планирует запустить эксперимент в Chrome 68 Beta и закончить его, когда будет выпущен Chrome 69 Stable. Другими словами, эксперимент будет проходить между 7 июня и 30 августа 2018 года.
Как включить картинку в картинке в Гугл Хром
Google Chrome – один из немногих браузеров, популярность которых не только не падает со временем, но, наоборот, растет год от года. Это объясняется его надежностью и многочисленными функциями, использование которых значительно упрощает любые действия в Интернете и даже позволяет совместить приятное с полезным. Одной из таких функций Google Chrome является «картинка в картинке». В зависимости от обстоятельств, она может использоваться как встроенная опция или как расширение.
О функции картинка в картинке
Чем хорош Интернет, так это тем, что работу иногда можно совместить с развлечением. Это особенно важно, когда работа не требует интеллектуального напряжения, а монотонная деятельность (например, заполнение таблиц) требует какого-то разнообразия.
Самый простой и доступный способ — посмотреть какое-нибудь развлекательное видео на YouTube или другом сайте, но при этом нужно держать перед глазами материал, с которым вы работаете. Можно и послушать, но это не так интересно.
Функция «картинка в картинке» позволяет просматривать видеоролики YouTube в окне поверх всего остального. Вы можете просматривать вкладки и продолжать смотреть интересующее вас видео, потому что оно всегда будет оставаться на виду.
Как активировать картинку в картинке
Если вы смотрите обычное видео на YouTube (т.е. не shorts), вы можете:
- щелкнуть значок миниплеера,
- или нажать i на клавиатуре.
Чтобы вернуться к обычному виду, снова нажмите i или щелкните значок Развернуть.
Этот метод не работает с YouTube Shorts, поскольку там нет значка Miniplayer, и клавиша i ничего не делает. Вот что вам нужно сделать:
- внимательно посмотрите в правый верхний угол вашего Chrome,
- найдите там символ музыкальной ноты,
- это кнопка под названием «Управление музыкой, видео и прочим».
- нажмите на нее, а затем найдите кнопку «Включить режим картинка в картинке»,
- нажмите на нее, и все готово.
Этот метод также отлично подходит, если у вас открыто несколько видео на разных вкладках – так легче выбрать, какое из них отображать поверх всего.
Расширения
Если по какой-то причине вам не нравится стандартная функция, возможно, она не работает для вас – вы всегда можете посетить веб-магазин Chrome. Там есть множество расширений «картинка в картинке».
Вы можете найти их по ключевым словам: picture-in-picture, PiP, floating и т.п. Одно из наиболее популярных расширений такого типа – Picture-in-Picture Extension (by Google)
Как устанавливать расширения:
- выберите расширение,
- нажмите Добавить в Chrome,
- нажмите Добавить расширения.
Теперь, чтобы воспользоваться расширением: щелкните на его значке при просмотре видео или нажмите на ярлык (некоторые расширения позволяют изменить управление).
По умолчанию значки расширений скрыты под кнопкой «Расширения» (значок в виде кусочка пазла в правом верхнем углу), что не очень удобно, поскольку приходится делать лишний клик, чтобы добраться до нужного расширения.
Закрепите расширение, нажав на значок булавки, чтобы поместить его в область быстрого доступа.
Режим картинка в картинке в Chrome 69
В версии 69 появилось расширение PictureInPicture, которое позволяет вывести видео поверх всех окон. Решил протестировать эту возможность и поделиться результатами.
Сразу нашел пример, но кнопка «картинка в картинке» для переключения в режим Picture-in-Picture (далее PiP) была недоступна, пошел проверять флаг chrome://flags/#enable-picture-in-picture, значение «Default», для этого флага, равносильно «Enabled», но все равно попробовал включить его вручную.
Не помогло, оказалось нужен еще один флаг chrome://flags/#enable-surfaces-for-videos, значение «Default» для него равносильно «Disabled».
Включил и заработало. Так же пишут, что необходимо включение флага #enable-experimental-web-platform-features, но у меня заработало и без него.
Пример
Сделаем простой пример, тег <video/>, кнопка для включения/выключения режима PiP, обработка доступных событий PiP.
Проверяем доступность режима:
Все просто, если свойство существует, оно возвращает true или false.
Делаем запрос на запуск режима:
Если разрешение получено, выполниться then иначе catch. Запрос точно будет отклонен, если не инициирован по событию пользователя.
После запуска document.pictureInPictureElement будет возвращать наш элемент <video/>.
Для выхода из режима можно в окне PiP нажать крестик в правом верхнем углу.
Можно сделать выход програмно:
После выхода из режима document.pictureInPictureElement снова будет возвращать null.
События PiP
Доступно два события, включение режима PiP и соответственно выключение:
Резюме
На данный момент, этот режим работает только с тегом <video/>, но возможно будет расширен.
Окно PiP появляется в правом нижнем углу, пока что мы не можем на это повлиять.
Режим PiP, несовместим с полноэкранным режимом, либо то либо другое, что вполне логично.
Одновременно может быть только одно окно PiP.
Вкладка, на которой пользователь включил режим PiP, отмечается значком (видно на КДПВ).
UPD: Новым API занимается подразделение W3C, которое называется WICG (Web Platform Incubator Community Group).
С помощью этого API сайты могут контролировать когда открывать и закрывать PiP-окно, делать свою кнопку для управления и собирать статистику когда пользователь использует PiP.
Некоторые браузеры уже поддерживают такую функцию, но не основанную на W3C
(Например Opera и Яндекс.Браузер).
Firefox и Edge пока не сообщали о реализации нового API.
Как сделать картинку в картинке в браузере
Крутая опция «Картинка в картинке» (или PiP) — это удобная фича, позволяющая открывать видео с сайтов в отдельном окне, которое можно располагать в любой части экрана, а также изменять его размер. При этом отдельное окно с видео не исчезает при переходе на другую вкладку в браузере Chrome или при сворачивании браузера. Эта функция будет особенно полезна для пользователей, работающих в режиме многозадачности на своем ПК.
Для того, чтобы активировать PiP в Chrome, необходимо скачать специальное расширение для Хром.
Установка расширения Picture-in-Picture (Картинка в картинке)
Чтобы установить расширение, сперва открываем браузер Google Chrome, нажав на иконку на панели задач, либо открыв хром из меню Пуск. Затем кликаем мышью по кнопке Меню (три точки) в верхней правой части окна браузера. В появившемся контекстном меню щелкаем на пункт Дополнительные инструменты, а затем в следующем меню щелкаем на Расширения.
В окне расширений щелкаем на кнопку Меню (три полоски) слева сверху, чтобы отобразить меню.
В появившемся меню в левой части окна щелкаем на ссылку Открыть Интернет-магазин Chrome.
На странице Интернет-магазина Chrome используем поисковое поле для поиска расширений — вводим запросы, например «Картинка в картинке», «PiP», «Picture in picture» и так далее.
Выбрав расширение, нажимаем синюю кнопку Установить. В нашем примере используем расширение «Picture-in-Picture with Playback Controls», ссылка на расширение здесь.
Перед установкой расширения браузер Google Chrome запросит подтверждение на установку, нажимаем на кнопку Установить расширение во всплывающем меню сверху.
Отлично! Расширение установлено. Теперь переходим на любой сайт с видеороликами, например всеми любимый YouTube. На панели инструментов Chrome справа от поисковой строки находим установленное расширение PiP и кликаем по нему левой кнопкой мыши.
Справа снизу появится миниатюрное окно с видео, которое располагается поверх всех окон.
Можно изменять размеры окна, а также перемещать его на любую часть экран нашего ПК.
Можно свернуть окно браузера, при этом окно с видео не закроется. Таким образом мы сможем выполнять свои задачи на ПК и смотреть любимые видеоролики с YouTube.