Ejercicio 18 – Video

Ejercicio 18 - Video

Realizaremos una app que nos mostrará un video con el que podremos interactuar desde nuestra interfaz. Para ello vamos a utilizar un componente llamado VideoPlayer que sirve para reproducir un archivo de vídeo.

Reproductor de vídeo es un componente multimedia que reproduce vídeos. Un reproductor de vídeo aparece en su aplicación como un rectángulo. Si el usuario pulsa el rectángulo, los controles de los medios de comunicación aparecen: reproducción / pausa, saltar hacia delante y saltar hacia atrás.

Su aplicación puede controlar el comportamiento de la reproducción mediante una llamada al inicio, pausa, e ir a: métodos.

Los archivos de vídeo deberán ser, Windows Media Video (. Wmv), 3GPP (.3 gp), o MPEG-4 (. Mp4). En este ejercicio subiremos a nuestra cuenta de App inventor un archivo .mp4 que se encuentra en nuestra carpeta de Material>Video

App Inventor acepta archivos de vídeo de hasta 1 MB de tamaño y limita el tamaño total de una aplicación de 5 MB. Si sus archivos de medios de comunicación son demasiado grandes, es posible que obtenga errores al empaquetar o instalar su aplicación, en cuyo caso se debe reducir el número de archivos de medios o sus tamaños. Puede utilizar Software de edición de vídeo, como Windows Movie Maker o iMovie de Apple, para reducir el tamaño de los vídeos, acortándolos o volver a codificarlos en formatos más compactos.

Ejercicio 18 - Video
La interfaz que vamos a construir es la siguiente:

Ejercicio 18 - Video

Como podemos ver los componentes de nuestra aplicación se dividen en dos disposiciones horizontales. La primera es para poner una etiqueta que sirve a modo de título de la app mientras que la segunda son los controles con los que podremos reproducir y parar nuestro video.
Además de un botón que nos permitirá parar el video en un determinado punto con el elemento campo de texto donde pondremos un valor en milisegndos para determinar los segundos de nuestro video. Por ejemplo, si ponemos en este campo 8000 nuestro video se parará en el segundo 8.
Debajo de estos controles colocamos el componente ReproductorVideo

Ejercicio 18 - Video

Ejercicio 18 - Video

Para colocar nuestro elemento reproductor de video tenemos que seleccionar de la paleta de Componentes de App inventor el llamado ReproductorVideo:

Ejercicio 18 - Video

Desde nuestra carpeta de Material buscamos el archivo Trailer20segundos la descargamos a nuestro ordenador y subimos a la aplicación a través de la opción Origen dentro de las propiedades del Reproductor.

Una vez diseñada nuestra interfaz pasaremos a programar nuestra aplicación, para ello abrimos el visor de bloques y construimos las siguientes líneas:

Ejercicio 18 - Video

Quedando así nuestras líneas

Ejercicio 18 - Video
Repetimos el procedimiento, pero ahora con el botón de Stop

Ejercicio 18 - Video
Por último, escribiremos el comportamiento del botón Buscar a:

Ejercicio 18 - Video

Ejercicio 18 - Video

Ejercicio 18 - Video