Na versão 69, a extensão PictureInPicture apareceu, o que permite exibir o vídeo em todas as janelas. Decidi testar esse recurso e compartilhar os resultados.
Encontrei imediatamente um exemplo, mas o botão picture-in-picture para alternar para o modo Picture-in-Picture (a seguir, PiP) não estava disponível, fui verificar a flag do
cromo: // flags / # enable-picture-in-picture , o valor é "Padrão", para esse sinalizador é equivalente a "Ativado", mas ainda tentou ativá-lo manualmente.
Não ajudou, mas precisávamos de outro sinalizador de
cromo: // flags / # enable-surface-for-videos , o valor "Padrão", pois é equivalente a "Desativado".
Ativado e ganho. Eles também escrevem que é necessário ativar o sinalizador # enable-experimental-web-platform-features, mas funcionou sem mim.
Exemplo
Vamos fazer um exemplo simples, a tag <video />, um botão para ativar / desativar o modo PiP, processando os eventos PiP disponíveis.
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
Verifique a disponibilidade do modo:
if (document.pictureInPictureEnabled){
É simples, se a propriedade existir, ela retornará verdadeiro ou falso.
Nós fazemos um pedido para iniciar o modo:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
Se a permissão for obtida, execute a captura caso contrário. A solicitação será definitivamente rejeitada se não for acionada por um evento do usuário.
Depois de iniciar document.pictureInPictureElement retornará nosso elemento <video />.
Para sair do modo, você pode clicar na cruz no canto superior direito da janela PiP.
Você pode fazer uma saída programaticamente:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
Depois de sair de document.pictureInPictureElement, ele retornará nulo novamente.
Eventos PiP
Dois eventos estão disponíveis, o modo PiP ativado e desativado, respectivamente:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
Sumário
No momento, esse modo funciona apenas com a tag <video />, mas pode ser expandido.
A janela PiP aparece no canto inferior direito, até agora não podemos afetá-la.
O modo PiP é incompatível com o modo de tela cheia, ou um ou outro, o que é bastante lógico.
Só pode haver uma janela PiP por vez.
A guia na qual o usuário ativou o modo PiP é indicada pelo ícone (visível no KDPV).
UPD : A nova API é a divisão W3C denominada WICG (Web Community Incubator Community Group).
Usando essa API, os sites podem controlar quando abrir e fechar a janela PiP, criar seu próprio botão para gerenciamento e coletar estatísticas quando o usuário usa o PiP.
Alguns navegadores já suportam esse recurso, mas não são baseados no W3C
(Por exemplo, Opera e Yandex.Browser).
O Firefox e o Edge ainda não anunciaram a implementação da nova API.