Angular 2 práctico: Sitio de consumo de videos

Desplegar controles avanzados

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Finalizamos nuestro componente explotando al máximo la información que despliega la API de HTML5 en conjunto con Angular para mostrar una barra de avance, mejorar los controles básicos y desplegar, por fin, nuestra aplicación de video.
09:07

Transcripción

En esta lección, vamos a aprender a implementar controles avanzados de video en HTML5, utilizando angular 2. Acá yo tengo una aplicación en la que estoy controlando un video de HTML5 a través de dos acciones. Estoy reproduciendo el video y también tengo la opción de detenerlo. Tengo un botón de pausa, que no he implementado aún, y también, acá, tengo la opción de ver el tiempo total que mide este video. Esto lo estoy haciendo dinámicamente a través de las propiedades de Angular 2. Ahora voy a modificar algunos elementos de mi aplicación y voy a comenzar incluyendo el botón de "Detener video". Este botón lo que está haciendo es que está pausando el video pero no lo está deteniendo. La conducta que estamos acostumbrados a ver, cuando algo se detiene, cuando ejecuta la opción "Stop", es que se devuelva al punto inicial. En este caso, solamente se está pausando. Vamos a modificar eso y vamos a ir a nuestra aplicación. Así que vamos a cambiar "Detener video". Lo vamos a cambiar de nombre, y le vamos a llamar "Pausar video". Esto va a ejecutar una pausa, ahora vamos a copiar el nombre que teníamos de "Detener video", voy a poner las conductas que teníamos hace un momento y "Detener video" lo que va a hace es que va a pausar la animación de nuestro video. El asunto es que en HTML5 nosotros no tenemos esa conducta de "Detener" de "Stop". Lo que vamos a hacer es que vamos a incluir un comando adicional cuando nosotros detenemos el video; y vamos a agregar una propiedad que se llama "Current time". En este caso, estoy tomando el elemento nativo del video y tengo acceso a todas las propiedades de su API. "Current time" es una de las propiedades de HTML5 que nos permite saber cuál es el tiempo en el que se está reproduciendo. Por ejemplo, si el video está en el segundo 5, vamos a tener acá un valor de 5. También esta propiedad nos permite leer y enviar datos. Así que, en este caso, voy a decir que el tiempo en el que va a estar nuestro video va a ser 0. Vamos a guardar y vamos a modificar nuestro reproductor. Acá, yo tengo nuestro reproductor y ya he asignado la opción "Detener video" y "Reproducir video". Tengo acá también, el botón en el que se muestra la pausa, así que vamos a copiar la información que está acá y es básicamente asignar al evento clic el método en este caso "Pausar video". Tenemos entonces "Pausar video" con un nuevo método que acabamos de crear y "Detener video" con una versión actualizada a la que ya teníamos. Vamos a revisar nuestra aplicación y vamos a ver que estamos reproduciendo, pausamos y para detener video y enviarlo a su posición original presionamos "Stop" y vemos que el video vuelve a comenzar. Son tres conductas diferentes, que estamos controlando desde Angular. Otra cosa que vamos a hacer es que vamos a habilitar la clásica barra de progreso que estamos acostumbrados a ver en los reproductores de HTML. Si bien es cierto que podemos habilitar la versión que ya viene incluida en HTML5, es mejor hacer una versión personalizada, y vamos a trabajarla desde Angular también. Ahora, ¿cómo vamos a hacer eso? Primero, necesitamos saber cuánto es el progreso que está teniendo nuestro video. Para eso, vamos a utilizar una propiedad que existe dentro de HTML5, esto es un evento que se llama "Time update". La actualización de este evento se va a realizar cada mili segundo de acuerdo al avance que vayamos teniendo en nuestro video. Ahora vamos a asignarle acá, un método y este método se va a llamar "Time update" que vamos a ejecutar cada vez que se ejecute el evento de "Time update" y le vamos a asignar dos parámetros de la misma forma que estamos asignando el de "metadata". Vamos a asignarle "Event" y "Video player". Lo que vamos a hacer es enviar la información del evento y también la información del elemento HTML5 que estamos controlando. Vamos a ir a nuestro código y voy a copiar acá el nombre de este nuevo método para incluirlo dentro de nuestro código. Tenemos que un "Time update" va a recibir dos elementos que va a ser el evento y también el video. Vamos a decir que también no nos devuelva nada, así que vamos a poner "void" y vamos a definir acá el código que se va a ejecutar cada que nosotros tengamos acceso al evento "Progress". Lo que vamos a hacer es que vamos a definir una variable donde va a existir el tiempo según el progreso que vaya teniendo nuestro video. ¿Cómo lo vamos a hacer? Primero, vamos a tomar la propiedad "Current time", que es el tiempo en el que se encuentra actualmente nuestro video. También vamos a tomar la propiedad "Duration" que nos da la duración total. Vamos a hacer una operación matemática simple, vamos a tomar un número redondeado y vamos a asignarlo a una variable que se llama progreso. Esta variable la tenemos que crear dentro de nuestra aplicación. Así que vamos a ir acá arriba y vamos a crear progreso. Listo. También aprovechamos que ya tenemos progreso definido como un número y vamos a definir otra nueva variable que se va a llamar "Posición". Vamos a necesitar saber cuál es la posición de nuestra aplicación con respecto al video que estamos reproduciendo. Para eso, vamos a buscar, acá también, cada vez que tengamos una actualización de tiempo, vamos a asignar "progreso" y vamos a darle formato a este número que tenemos acá "progreso" y vamos a tener posición. ¿Qué es lo que vamos a hacer? Vamos a tomar los valores de tiempo actual, y vamos a convertirlos a minutos y segundos para saber la posición actual. Ahora vamos a tener dos tiempos, uno en el que ya sabemos cuál es la totalidad del video y otro en el que sabremos cuál es el punto en el que se encuentra la reproducción. Vamos a guardar y vamos a volver a la plantilla en la que estamos trabajando. Vamos a desplegar primero, cuál es el valor en el que se encuentra nuestro video y para eso vamos a buscar donde tenemos definido acá la duración. Nosotros tenemos definido la duración que va a tener nuestro video y la vamos a desplegar en un total, pero voy a reemplazar este código y voy a poner dos valores, voy a poner la posición en la que se encuentra, que ya hemos visto acá la posición con minutos y segundos, y también voy a desplegar la duración. Así vamos a saber cuántos segundos de reproducción versus el total. Voy a utilizar acá también la directiva "ng-if" para demostrar únicamente estos valores cuando están disponibles y, finalmente, voy a agregar una barra de progreso. En la barra de progreso, que tengo acá el código incluído, tengo básicamente dos elementos, dos dips, uno dentro del otro, y he agregado también algunas clases de sss acá para poderlo desplegar. Lo que voy a hacer es un proceso muy simple y es que voy a tomar el progreso en el que está mi video, utilizando el valor que he incluido dentro del código y voy a utilizarlo a través de la directiva "Engine style" para darle un ancho, de acuerdo al progreso que tenga vamos a tener un ancho. Vamos a ver el resultado final de nuestra aplicación que está leyendo la información como vemos acá, un segundo, dos, tres, cuatro, cinco. Y nos va mostrando el total de tiempo, y como ya has visto, tenemos una barra de progreso, la cual ya le he asignado los estilos de sss, por eso se ve de color rojo con este ancho, pero el tamaño, el ancho que va teniendo la propiedad gif vamos asignándola a partir del progreso. El valor va cambiando, al igual que este, según va avanzando la reproducción de nuestro video. Así, ya tenemos un video que podemos reproducir, pausar o regresar al inicio y podemos saber en qué momento va avanzando en tiempo real.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.