Опубликовано: 18 марта 2026 г.
Начиная с Chrome 142, веб-приложения, воспроизводящие аудио или видео, могут автоматически переходить в режим «картинка в картинке», если они зарегистрируют обработчик действий медиасессии. Это стало отличным дополнением для музыкальных и видеоплееров, но требует от разработчиков явной реализации поддержки.
Для обеспечения бесперебойной многозадачности с мультимедиа и улучшения видимости режима «картинка в картинке» (PiP) Chrome представляет функцию автоматического открытия окна PiP, запускаемого браузером. Эта функция позволяет Chrome автоматически открывать окно PiP с видео для сайтов, которые не зарегистрировали обработчик действий медиасессии. Это гарантирует, что ваш медиаконтент останется видимым при переключении вкладок.
Инструкции
- На компьютере используйте Chrome версии 142 или более поздней.
- Включите параметр "Автоматическая настройка "картинка в картинке" по умолчанию, инициируемая браузером" в
chrome://flags/#browser-initiated-automatic-picture-in-pictureи перезапустите Chrome. - Зайдите на видеохостинг и посмотрите видео ( пример ).
- Переключитесь на другую вкладку Chrome, чтобы запустить видеоокно в режиме «картинка в картинке».
Как это работает
Когда вы воспроизводите медиафайл и переключаетесь на другую вкладку, Chrome может автоматически переместить медиафайл в постоянно открытое окно «картинка в картинке» для видео. В отличие от существующей функции «Автоматическое отображение картинки в картинке для воспроизведения медиафайлов», которая поддерживает как видео, так и произвольный HTML-контент (используя API «картинка в картинке» для документов ), запросы, инициированные браузером, всегда открывают стандартное окно «картинка в картинке» для видео.
Для обеспечения высокого качества и ненавязчивого взаимодействия с пользователем Chrome запускает это поведение только при соблюдении строгого набора условий:
- Согласно сервису Safe Browsing, URL верхнего фрейма безопасен.
- Медиафайл находится в верхнем кадре.
- В последние две секунды в СМИ был слышен шум.
- В медиафайле присутствует звуковой сигнал, и он воспроизводится.
- Существует единственный «обычный» плеер, то есть медиаэлемент без звука, который воспроизвел контент и не использует
MediaStream. - Медиаэлемент должен содержать видеодорожку.
- Сайт не использует камеру или микрофон в активном режиме.
- Пороговое значение Индекса вовлеченности в медиаконтент пользователя превышено, что указывает на частое использование сайта. Это условие выполняется, если пользователь явно не разрешил или не запретил использование данной функции.
- В данный момент ни одно окно PiP не открыто. Если другое окно PiP уже открыто, Chrome не запускает автоматический переход.
enterpictureinpicture ), и автоматического режима «картинка в картинке» для воспроизведения мультимедиа (где сайт зарегистрировал обработчик).Пользовательский контроль и конфиденциальность
Автоматический режим «картинка в картинке», инициируемый браузером, учитывает те же разрешения и настройки пользователя, что и запросы, инициированные сайтом. При первом автоматическом переходе сайта в режим «картинка в картинке» Chrome отображает пользователям диалоговое окно с запросом разрешения, спрашивающее, хотят ли они разрешить это поведение для сайта в будущем.
Пользователи также могут в любое время управлять этими правами доступа через раздел « Настройки сайта ».
Контроль со стороны разработчика и возможность отказа от участия
Хотя эта функция разработана для работы в стандартной комплектации большинства видеосайтов, вы можете отключить её.
Реализуйте собственный обработчик.
Если ваше веб-приложение уже зарегистрировало обработчик действий медиасессии для действия enterpictureinpicture , ваша реализация будет иметь приоритет, и Chrome не будет инициировать собственный автоматический переход.
Если вы хотите настроить поведение Chrome при выборе подходящего момента перехода, обработчик действия enterpictureinpicture включает reason в MediaSessionActionDetails . Вы можете проверить, является ли reason contentoccluded (что означает, что браузер инициировал запрос, потому что вкладка была скрыта), и решить, как действовать дальше.
navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
if (details.reason === "contentoccluded") {
// The browser suggests entering Picture-in-Picture.
// You can choose to open a standard video PiP or a Document PiP window, or do
// nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
}
});
Рекомендации по проведению медиа-сессий
Благодаря функции Auto PiP, запускаемой браузером, конфигурация вашей медиасессии помогает Chrome понимать ваш контент и взаимодействовать с ним. Правильно настроенная MediaSession гарантирует, что окно PiP обеспечит высокое качество изображения с точными элементами управления и информацией для пользователей.
Следите за синхронизацией индикатора выполнения.
Если используется API setPositionState , и позиция медиасессии обновляется некорректно, окна PiP отображают неверную полосу прогресса во время воспроизведения медиафайлов. Чтобы этого избежать, всегда обновляйте или сбрасывайте position state с помощью navigator.mediaSession.setPositionState() по мере необходимости (например, при изменении или сбросе источника медиафайлов), чтобы окно PiP отражало правильное положение воспроизводимого медиафайла.
const video = document.querySelector('video');
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: video.duration,
playbackRate: video.playbackRate,
position: video.currentTime,
});
}
}
// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);
Плавные переходы
Если на вашем сайте автоматически воспроизводится «Следующий эпизод», убедитесь, что обработчики действий MediaSession и метаданные остаются активными и точными на протяжении всего перехода. Если обработчики действий удаляются или не задаются во время перехода к элементу «Следующий», окно «картинка в картинке» может потерять возможности, предоставляемые обработчиком.
Включить полный контроль
Помимо базовых функций воспроизведения и паузы, рассмотрите возможность реализации обработчиков для seekto , previoustrack и nexttrack . Это позволит пользователям перемещаться по контенту непосредственно из окна PiP, не возвращаясь к исходной вкладке.
navigator.mediaSession.setActionHandler("seekto", (details) => {
if (details.fastSeek && "fastSeek" in video) {
video.fastSeek(details.seekTime);
return;
}
video.currentTime = details.seekTime;
});
Принимайте участие и делитесь отзывами.
Если у вас есть замечания или вы столкнулись с какими-либо проблемами, связанными с этим поведением, сообщите о них на сайте crbug.com .