Picture-in-picture (PiP)

François Beaufort

GitHub

Desde abril de 2017, o Chrome para Android O oferece suporte ao picture-in-picture. Ele permite que os usuários reproduzam um elemento <video> em uma pequena janela de sobreposição que não é bloqueada por outras janelas, para que possam assistir enquanto fazem outras coisas.

Veja como funciona: abra o Chrome, acesse um site que contenha um vídeo e reproduza-o em tela cheia. Depois, pressione o botão home para acessar a tela inicial do Android, e o vídeo em reprodução vai fazer a transição automática para o modo picture-in-picture. É isso! Não é incrível?

É, mas e quanto ao computador? E se o site quiser controlar essa experiência?

A boa notícia é que uma especificação da API Picture-in-Picture está sendo esboçada enquanto falamos. O objetivo desta especificação é permitir que os sites iniciem e controlem esse comportamento expondo o seguinte conjunto de propriedades à API:

• Notificar o site quando um vídeo entrar e sair do modo picture-in-picture.
• Permitir que o site acione o picture-in-picture em um elemento de vídeo usando um gesto do usuário.
• Permitir que o site saia do modo picture-in-picture.
• Permita que o site verifique se o picture-in-picture pode ser acionado.

E esta seria a aparência dela:

<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>

Feedback

E então, o que você acha? Envie seu feedback e informe problemas no repositório WICG picture-in-picture. Estamos ansiosos para saber sua opinião.

Como impedir o comportamento padrão do PIP do Android

Atualmente, é possível evitar que um vídeo use o comportamento padrão de picture-in-picture do Android no Chrome respondendo a um evento de redimensionamento e detectando quando o tamanho da janela muda significativamente (veja o código abaixo). Essa não é uma solução permanente, mas oferece uma opção temporária até que a API Web seja implementada.

// 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();
    }
});