Картинка в картинке (PiP)

Франсуа Бофор
François Beaufort
GitHub

С апреля 2017 года Chrome для Android O поддерживает функцию «Картинка в картинке» . Он позволяет пользователям воспроизводить элемент <video> в небольшом наложенном окне, которое не блокируется другими окнами, чтобы они могли смотреть, одновременно занимаясь другими делами.

Вот как это работает: откройте Chrome, перейдите на веб-сайт, содержащий видео, и воспроизведите его в полноэкранном режиме. Отсюда нажмите кнопку «Домой», чтобы перейти на главный экран Android, и воспроизводимое видео автоматически перейдет в режим «Картинка в картинке». Вот и все! Довольно круто, правда?

Android-фото «картинка в картинке»
Рис. 1. Фотография «Картинка в картинке» на Android

Это так, но как насчет рабочего стола? Что, если веб-сайт хочет контролировать этот процесс?

Хорошей новостью является то, что в данный момент разрабатывается спецификация веб-API «картинка в картинке» . Цель этой спецификации — позволить веб-сайтам инициировать и контролировать такое поведение, предоставляя API следующий набор свойств:

  • Уведомляйте веб-сайт, когда видео входит в режим «картинка в картинке» и выходит из него.
  • Разрешить веб-сайту запускать функцию «Картинка в картинке» на видеоэлементе с помощью жеста пользователя.
  • Разрешите веб-сайту выйти из режима «Картинка в картинке».
  • Разрешите веб-сайту проверить, можно ли активировать функцию «Картинка в картинке».

И вот как это может выглядеть:

<video id="video" src="https://example.com/file.mp4"></video>

<button id="pipButton"></button>

<script>
    // Hide button if Picture-in-Picture is not supported.
    pipButton.hidden = !document.pictureInPictureEnabled;

    pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
        video.requestPictureInPicture()
        .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
        });
    } else {
        document.exitPictureInPicture()
        .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
        });
    }
    });
</script>

Обратная связь

Так что ты думаешь? Пожалуйста, оставляйте свои отзывы и поднимайте вопросы в репозитории «Картинка в картинке» WICG . Мы хотим услышать ваши мысли!

Предотвращение стандартного поведения PIP в Android

Сегодня вы можете запретить видео использовать поведение PiP по умолчанию в Android в Chrome, реагируя на событие изменения размера и обнаруживая, когда размер окна значительно изменился (см. код ниже). Это не рекомендуется в качестве постоянного решения, но это временная опция, пока не будет реализован веб-API.

// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
    if (!document.fullscreenElement) {
    return;
    }

    var minimumScreenSize = 0.33;
    var screenArea = screen.width * screen.height;
    var windowArea = window.outerHeight * window.outerWidth;

    // If the size of the window relative to the screen is less than a third,
    // let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
    if ((windowArea / screenArea) < minimumScreenSize) {
    document.exitFullscreen();
    }
});