API Picture-in-Picture do JavaScript

Como grande fã de mídia na Web, sempre fico empolgado com os aprimoramentos na forma como podemos controlar nossa mídia. Talvez eu fique entusiasmado com coisas simples como a <video> e seus elementos e atributos associados, porque a mídia na Web começou com codecs personalizados, extensões de navegador e Flash. O mais recente e incrível recurso de mídia que me empolga na Web é o Picture-in-Picture, uma API nativa da Web que exibe vídeo acoplado. Vamos dar uma olhada em como ele funciona!

Benefícios do Picture-in-Picture

Antes de usar o Picture-in-Picture, é importante saber por que usá-lo e os benefícios que o senhor obtém:

• Não há necessidade de criar seu próprio elemento de vídeo acoplado quando o usuário rola a tela – o navegador faz isso para o senhor!
• Grande ganho de desempenho, usabilidade e manutenção
• O vídeo encaixado é exibido acima de todas as guias do navegador, não apenas na guia em que foi iniciado
• Permanece no modo PiP até que o usuário mude de página

Detectar suporte a Picture-in-Picture

Antes de usar qualquer API, é melhor garantir que o recurso seja compatível e esteja ativado; para isso, o navegador expõe document.pictureInPictureEnabled, bem como um atributo por vídeo:

if(
    document.pictureInPictureEnabled && 
    !videoElement.disablePictureInPicture
) {
    // Yay, we can use the feature!
}

Com o navegador compatível com a API, é hora de começar!

Como iniciar o Picture-In-Picture

Antes de iniciar o picture-in-picture, é importante verificar primeiro se já não estamos no PiP:

if(!document.pictureInPictureElement) {
    videoElement.requestPictureInPicture();
}

Depois de confirmarmos que o PiP não está sendo usado, podemos iniciar o PiP chamando requestPictureInPicture() no HTMLVideoElement.

Saindo do Picture-in-Picture

Para sair do modo Picture-in-Picture, o senhor pode ligar para exitPictureInPicture():

document.exitPictureInPicture();

A janela do PiP será removida da parte inferior de seu navegador.

Função segura de Picture-in-Picture

Reunindo os exemplos de código fornecidos, podemos criar uma função utilitária Picture-in-Picture segura:

function enterPictureInPicture(videoElement) {
    if(
        document.pictureInPictureEnabled && 
        !videoElement.disablePictureInPicture) {
            try {
                if (document.pictureInPictureElement) {
                    document.exitPictureInPicture();
                }
                videoElement.requestPictureInPicture();
            } catch(err) {
                console.error(err);
            }
    }
}

Essa função pode colocar seu vídeo com segurança no Picture-in-Picture e, ao mesmo tempo, protegê-lo de erros ou de vídeos que já sejam PiP.

Eventos de Picture-in-Picture

Juntamente com a funcionalidade de entrar e sair do Picture-in-Picture, um conjunto de eventos JavaScript é emitido durante cada etapa:

• enterpictureinpicture: disparado no HTMLVideoElement que foi colocado no Picture-in-Picture
• leavepictureinpicture: disparado contra o HTMLVideoElement para o qual o PiP foi encerrado

Aqui está um exemplo rápido de cada um:

$("#myVideo").addEventListener("enterpictureinpicture", e => {
    // Entered PiP!
});

$("#myVideo").addEventListener("leavepictureinpicture", e => {
    // Exited PiP!
});

O modo Picture-in-Picture é uma API incrível que permite que os usuários consumam conteúdo de vídeo à medida que exploram outras guias ou simplesmente navegam na sua página. Juntamente com a scroll ou mesmo com o evento API do observador de interseção, o Picture-in-Picture é um recurso poderoso que seus usuários vão adorar!