En la versi贸n 69, apareci贸 la extensi贸n PictureInPicture, que le permite mostrar videos en la parte superior de todas las ventanas. Decid铆 probar esta funci贸n y compartir los resultados.
Inmediatamente encontr茅 un ejemplo, pero el bot贸n de imagen en imagen para cambiar al modo de imagen en imagen (en adelante PiP) no estaba disponible, fui a verificar el indicador de
cromo: // flags / # enable-picture-in-picture , el valor es "Predeterminado", para esta bandera es equivalente a "Habilitado", pero aun as铆 trat贸 de habilitarlo manualmente.
No sirvi贸 de nada, result贸 que necesit谩bamos otra bandera de
Chrome: // flags / # enable-Surface-for-videos , el valor "Predeterminado" es equivalente a "Disabled".
Encendido y ganado. Tambi茅n escriben que es necesario habilitar la bandera # enable-experimental-web-platform-features, pero funcion贸 sin m铆.
Ejemplo
Hagamos un ejemplo simple, la etiqueta <video />, un bot贸n para activar / desactivar el modo de im谩genes incrustadas, que procesa los eventos de im谩genes incrustadas disponibles.
<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 la disponibilidad del modo:
if (document.pictureInPictureEnabled){
Es simple, si la propiedad existe, devuelve verdadero o falso.
Hacemos una solicitud para iniciar el modo:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
Si se obtiene el permiso, ejecute lo contrario catch. La solicitud definitivamente ser谩 rechazada si no es activada por un evento de usuario.
Despu茅s de iniciar document.pictureInPictureElement devolver谩 nuestro elemento <video />.
Para salir del modo, puede hacer clic en la cruz en la esquina superior derecha de la ventana de im谩genes incrustadas.
Puede hacer una salida mediante programaci贸n:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
Despu茅s de salir de document.pictureInPictureElement, volver谩 a ser nulo nuevamente.
Eventos de im谩genes incrustadas
Hay dos eventos disponibles, modo PiP activado y desactivado, respectivamente:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
Resumen
Por el momento, este modo solo funciona con la etiqueta <video />, pero puede expandirse.
La ventana de im谩genes incrustadas aparece en la esquina inferior derecha, hasta ahora no podemos afectarla.
El modo PiP es incompatible con el modo de pantalla completa, o uno u otro, lo cual es bastante l贸gico.
Solo puede haber una ventana de im谩genes incrustadas a la vez.
La pesta帽a en la que el usuario ha habilitado el modo PiP se indica mediante el icono (visible en el KDPV).
UPD : La nueva API es la divisi贸n W3C llamada WICG (Web Platform Incubator Community Group).
Con esta API, los sitios pueden controlar cu谩ndo abrir y cerrar la ventana de im谩genes incrustadas, crear su propio bot贸n de administraci贸n y recopilar estad铆sticas cuando el usuario usa im谩genes incrustadas.
Algunos navegadores ya admiten esta funci贸n, pero no se basan en W3C
(Por ejemplo, Opera y Yandex.Browser).
Firefox y Edge a煤n no han anunciado la implementaci贸n de la nueva API.