Picture in Picture con Javascript – Video en preview

Picture in Picture con Javascript – Video en preview

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.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

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

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.

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

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.

Como ves le pasamos el componente de video.

Ahora seguimos con la función para entrar al modo Picture in Picture.

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.

Ya solo hacemos todas las llamadas iniciales al terminar de cargar nuestro página.

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!

Dejar un comentario

avatar
  Subscribe  
Notify of