Hoy aprenderemos a crear la funcionalidad de Picture in Picture con Javascript para establecer un video tipo Preview fijo sin importar el scroll del usuario, veremos codigo fuente del ejemplo paso a paso y una pequeña explicación.
Muchas veces es necesario mostrar un video en nuestro sitio web o proyecto web.
Estos videos son geniales pero fuerzan al usuario a permanecer en una sección de la web para poder verlo y escucharlo.
En algunos televisores existe una función llamada Picture in Picture que consiste en mostrar el canal actual y otro canal adicional en una pequeña ventana.
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresaDe este modo el usuario es capaz de visualizar dos contenidos al mismo tiempo sin perderse de ningun contenido.
Lo que haremos el día de hoy es algo muy similar, lo cual consiste en hacer que un video de nuestro contenido permanezca visible todo el tiempo mientras nuestros usuarios siguen en la página consumiendo nuestro demás contenido o haciendo una tarea manual.
¿Estas listo para conocer cómo hacer el Picture in Picture con Javascript?
Picture in Picture
Antes de continuar vamos a ver un pequeño video del resultado del día d hoy.
Código fuente
Lo primero será tener un componente de video en nuestro proyecto web.
<video src="video/videosanimados.mp4" controls id="miVideo"></video>
Es importante establecer un id al componente para futuras referencias.
También agregaremos un par de botones para controlar cuando entrar y salir del modo PiP – Picture in Picture.
<p id="areaControles" style="display:none;">
<button id="entrarModoPiP">Entrar a Modo Picture-in-Picture</button>
<button id="salirModoPiP">Salir de modo Picture-in-Picture</button>
</p>Aquí vamos a establecer oculto con css este panel de controles, los activaremos más adelante si la funcionalidad es compatible.
Ya en Javascript, para convertirnos en este componente de video utilizaremos el siguiente codigo
var video = document.getElementById("miVideo");Comenzando con las tres funciones que veremos el día de hoy para esta funcionalidad de Picture in Picture con Javascript la primera será una para comprobar si es compatible con nuestro navegador.
function pictureInpictureCompatible(video){
if( document.pictureInPictureEnabled && !video.disablePictureInPicture ) {
return true;
}
return false;
}Como ves le pasamos el componente de video.
Ahora seguimos con la función para entrar al modo Picture in Picture.
function entrarModoPiP(video) {
if( document.pictureInPictureEnabled && !video.disablePictureInPicture) {
try {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
}
video.requestPictureInPicture();
}catch(err) {
console.error(err);
}
}
}A esta función tambien le pasamos como parametro nuestro componente video y llama a la función requestPictureInPicture.
Por último la función para salir de este modo es mucho más simple.
function salirModoPiP(){
document.exitPictureInPicture();
}Ya solo hacemos todas las llamadas iniciales al terminar de cargar nuestro página.
var video = document.getElementById("miVideo");
if( pictureInpictureCompatible(video) ){
// Visualizamos controles
jQuery("#areaControles").css("display","block");
// Evento click para entrar modo PiP
jQuery("#entrarModoPiP").on("click",function(){
entrarModoPiP(video);
});
// Evento click para salir modo PiP
jQuery("#salirModoPiP").on("click",function(){
salirModoPiP();
});
}else{
console.log("Funcionalidad Picture In Picture no compatible");
}Aquí unicamente hacemos la logica de llamadas a las funciones antes vistas, hacemos visibles los controles si la funcionalidad es compatible y agregamos los eventos de click a los botones.
Con todo esto ya debemos de tener funcionando nuestra funcionalidad de PiP en nuestro proyecto web.
Si esta información sobre Picture in Picture con Javascript te es de utilidad no olvides compartirla en tus redes sociales o dejarnos un comentario en la sección de abajo, será un placer ayudarte con cualquier duda relacionada.
¡Hasta luego!