Angular 2 práctico: Sitio de consumo de videos

Controlar un video con Angular

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
En Angular puede ser algo complejo utilizar los eventos y acceder directamente las APIs avanzadas de HTML5, pero en esta lección te mostraré los trucos para crear un controlador básico personalizado utilizando la arquitectura de Angular
08:42

Transcripción

En esta lección, vamos a aprender a controlar un reproductor personalizado de HTML5 desde Angular 2. Acá yo tengo una aplicación que está desplegando un video y tengo dos imágenes para utilizar como controladores personalizados. Voy a entrar al código de mi aplicación y te voy a mostrar la plantilla que estoy utilizando donde tenemos el video, que está mostrando un video a partir de una ruta dinámica. También tengo los controles. En este caso, acá tengo el que muestra la imagen de reproducir y el que muestra la imagen de detenerse. Vamos a controlar este video de HTML5. Ahora, para controlarlo, normalmente dentro de JavaScript nosotros solo tenemos que seleccionar el elemento del "DOM", del "Document Object Model" y, a partir de ahí, asignarle algunos métodos de la API de HTML5, como por ejemplo "play" o "pause". Ahora, nosotros no podemos acceder esto directamente desde Angular, pero tenemos una forma de hacerlo muy sencillo Vamos a incluir el signo de "numeral" o "gato" o "hashtag" (#), dependiendo como le digan en tu país. Vamos a incluir esto y le vamos a asignar un valor. En este caso, le voy a poner "videoPlayer". Esto va a generar una instancia de este elemento. Así, voy a poderlo controlar con la API de HTML5 Ahora, para poder acceder esta instancia yo necesito hacer algunos cambios dentro de mi "componente". Vamos a ir al código del "componente". En este caso, estoy trabajando dentro de "video-player.component.ts". Ahora, estoy acá y voy a revisar que en el "import" principal del "core" de "angular", del núcleo de "angular", se encuentre una instancia de un elemento llamado "ViewChild" que nos va a permitir acceder este elemento que hemos creado. Ahora, una vez que ya tenemos definido este módulo necesitamos utilizarlo dentro de nuestra aplicación y para eso vamos a poner "@ViewChild", y vamos a definir dentro de este "ViewChild" el nombre del componente que acabamos de crear, en este caso, "videoPlayer". Ahora sí, tenemos acceso a él dentro de nuestra aplicación. Importante, una cuestión de sintaxis, no pongas punto y coma en esta línea porque la línea correcta acá es sin punto y coma. Ahora, una vez que ya tenemos acceso a el reproductor de video, vamos a crear un par de variables, en este caso, "videoPlayer", que me va a permitir acceder este elemento dentro de mi código. Y vamos a asignarle el tipo "any". También vamos a crear una variable que va a ser con el nombre "duracion" y va a ser de tipo "string", que vamos a utilizar más adelante. Ahora ya tenemos este elemento para controlar dentro de nuestra aplicación, simplemente tenemos que crear un método para controlar nuestro video. Y vamos a poner "reproducirVideo". Vamos a asignarle que nos devuelva "void" porque no devuelve ningún resultado, y vamos a llamar a "this.videoPlayer". Y acá tenemos acceso a esta instancia de HTML5. Sin embargo, no vamos a poderlo acceder de la manera regular, como haríamos, por ejemplo, en un reproductor normal de HTML5, que sería llamando acá la propiedad "play", sino que lo vamos a acceder de manera indirecta en Angular 2 y lo que vamos a hacer es que vamos a poner una propiedad que se llama "nativeElement". Una vez que llamamos a "nativeElement" tenemos acceso directo a la API, en este caso de HTML5 para controlar el video. ¡Listo! Ya tenemos un método que va a reproducir nuestro video. Ahora vamos a insertarlo dentro de la plantilla. Buscamos la imagen que estamos utilizando para desplegar el botón de reproducir. En este caso, yo la tengo acá identificada y voy a asignarle una conducta. En Angular, nosotros utilizamos los eventos como, por ejemplo, "click" a través de los paréntesis. Así que voy a poner "click" y voy a decirle que cada vez que se genere este evento reproduzca el video. Guardamos, revisamos nuestra aplicación y hago clic en el botón que acabo de asignar y vemos que se está reproduciendo el video. Vamos a duplicar esta misma conducta y la vamos a modificar ligeramente. Voy a copiar este evento y voy a copiar este método. Voy a conservar el evento. Pero vamos a cambiar este método por uno que se llama "detenerVideo". Ahora, este todavía no existe y vamos a crearlo dentro del componente. Venimos acá el componente, creamos el método "detenerVideo", con ninguna respuesta. Y vamos a copiar el mismo principio que acabamos de aplicar. Vamos a llamar a "videoPlayer". Llamamos al "elemento nativo" de HTML5 e invocamos la API de HTML5, en este caso "play", pero la vamos a cambiar para que se detenga. Recordemos que en el caso de HTML5 video no tenemos "stop" sino "pausa". Listo, vamos a revisar nuestra aplicación. Reproducimos. Detenemos. Y ya estamos controlando el video. Vamos a hacer un último paso adicional y vamos a recuperar información de este video. ¿Cómo vamos a recuperar información? Bueno, vamos a acceder los datos que se encuentran dentro del video y vamos a desplegar cuánto es la duración total que tiene este video. Así que vamos a irnos al elemento "video", a la etiqueta que tenemos dentro de HTML5 y le vamos a agregar un evento especial de Angular que se llama... lo vamos a agregar... "loadedmetadata". Este "loadedmetadata" nos va a servir para que en el momento en que tengamos acceso a los metadatos de este elemento, por ejemplo, ahora, "video", vamos a activar una función. Vamos a copiar... acá yo ya tengo un código listo ...y vamos a decirle que cuando esto suceda active un método, en este caso se va a llamar "onMetadata". Y vamos a enviar el evento que está acá sucediendo y también vamos a enviar la instancia de "videoPlayer". Así lo vamos a controlar directamente dentro del método. Vamos a guardar, volvemos al código de nuestra aplicación y vamos a incluir acá el nuevo método que acabamos de crear que se llama "onMetadata". Y estamos recibiendo el evento y la instancia de nuestro video, en este caso "videoPlayer". Ahora que ya tenemos esta información, vamos a asignar dos variables, una que se va a llamar "minutos" y otra que se va a llamar "segundos". Así vamos a obtener la información de nuestro video. Nosotros vamos a tener acceso a todos los datos del video dentro de esta instancia. Así que vamos a utilizar la información que viene dentro de un parámetro llamado "duration". Ahora, importante es que esa información nos va a llegar a nosotros en segundos con fracción. Así que voy a utilizar un par de ayudas matemáticas. Vamos a utilizar "Math.floor" para redondear el número que nos va a llegar y convertirlo a minutos. Y, también, vamos a utilizar el mismo principio para convertirlo a segundos. Una vez que ya lo tenemos listo, vamos a utilizar "this.duracion", que ya habíamos definido antes como una cadena de texto, y vamos a concatenar estos dos valores de minutos y segundos y vamos a tomar "duracion". La vamos a poner dentro de nuestra plantilla, en este caso vamos a ponerlo después del "titulo", para que sea fácil de encontrar, y ponemos "duracion". Listo, ya tenemos la información de nuestro video. Estamos controlándolo. Y tenemos el dato de que nuestro video tarda once segundos. Lo podemos reproducir, detener y tenemos acceso a todos los elementos de la API de HTMML5 utilizando estos principios básicos.

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.