Опубликовано: 5 февраля 2025 г.
Начиная с Chrome 120, веб-приложения для видеоконференций могут автоматически открывать окно «картинка в картинке», когда пользователь переключает фокус с текущей вкладки. Это полезно для докладчиков, которые хотят видеть участников и взаимодействовать с ними в режиме реального времени во время представления документа или использования других вкладок или окон. Подробности см. в разделе Автоматическая картинка в картинке для веб-приложений для видеоконференций .
В Chrome 134 веб-приложения, воспроизводящие аудио или видео, могут автоматически переходить в режим «картинка в картинке». Это означает, что музыкальные и видеоплееры в Интернете теперь могут плавно переключаться в окно мини-плеера, когда пользователь переключает вкладки, что устраняет необходимость ручной активации.
Для поддержки этих вариантов использования воспроизведения мультимедиа настольные веб-приложения Chrome 134 могут автоматически переходить в режим «картинка в картинке» с некоторыми ограничениями, чтобы обеспечить положительный пользовательский опыт. Веб-приложение имеет право на автоматическое воспроизведение мультимедиа «картинка в картинке» только в том случае, если оно соответствует всем следующим условиям:
URL-адрес верхнего фрейма безопасен согласно службе безопасного просмотра.
СМИ живут в верхнем кадре.
СМИ было слышно в течение последних двух секунд.
СМИ имеют аудио-фокус.
СМИ играют.
Обработчик действия медиа-сеанса для действия
"enterpictureinpicture"зарегистрирован.Превышено пороговое значение индекса вовлеченности пользователя в мультимедиа , что указывает на то, что пользователь часто использует мультимедиа в этом веб-приложении. Это применимо, если в настройках браузера пользователя установлено значение «Может запрашивать ввод изображения в картинке». Если пользователь явно разрешает веб-приложению использовать режим «картинка в картинке», это условие не применяется.
Ошибка 386193409 отслеживает реализацию условий поверхности, чтобы упростить отладку и реализацию.
Обратите внимание: если другое окно «картинка в картинке» уже открыто, Chrome не запускает автоматическую картинку в картинке. Это правило не применяется, если существующее окно «картинка в картинке» было открыто автоматически и вот-вот закроется.
Когда веб-приложение соответствует требованиям, переключение фокуса на другую вкладку запускает функцию обратного вызова обработчика действий мультимедийного сеанса для действия "enterpictureinpicture" . Это позволяет веб-приложению открывать окно «картинка в картинке» без жестов пользователя. Затем пользователю может быть представлено диалоговое окно разрешения с вопросом, хотят ли они разрешить сайту автоматически вводить картинку в картинке каждый раз, только в этот раз или никогда.
Вы можете использовать API «Картинка в картинке» для <video>, чтобы открыть окно «картинка в картинке» из HTML-элемента <video> , или API «Картинка в картинке» для документа , чтобы открыть окно «всегда поверх» для заполнения произвольным HTML-содержимым. Окно «картинка в картинке» не фокусируется при открытии и автоматически закрывается, когда страница снова становится видимой.
В следующем примере показано, как воспроизводить элемент HTML <video> , когда пользователь нажимает кнопку. Затем безопасно зарегистрируйте обработчик действия мультимедийного сеанса для действия "enterpictureinpicture" с функцией обратного вызова, которая открывает окно «картинка в картинке». Это окно содержит видео с API «картинка в картинке» для <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Попробуйте демо-версию проигрывателя VideoJS , в которой демонстрируется API Document Picture-in-Picture, или поиграйте с примерами сеансов Video Media и Audio Media Session .
Привлекайте и делитесь отзывами
Если у вас есть отзывы или вы столкнулись с какими-либо проблемами, вы можете поделиться ими на crbug.com .
Ресурсы
Благодарности
Спасибо Бенджамину Кину и Фрэнку Либерато за их обзоры.