Inserción y reproducción de video en Android

15/12/2016
Multimedia, Nivel Básico, Premium

1. Inserción y reproducción de audio en Android

2. Inserción y reproducción de video en Android

Siguiendo con la integración de formatos multimedia en una app, veremos en este tutorial cómo podemos integrar videos en nuestra App Android e interaccionar con ellos mediante una interfaz de usuario básica que incluya los botones de reproducir, parar y reiniciar el video.

Señalar que no utilizaremos streaming, sino que los videos estarán incluidos en nuestra aplicación, habiendo una gran variedad de formatos multimedia soportados por Android.
Te aconsejamos consultar el anterior tutorial donde veíamos cómo integrar y reproducir audio en una App Android ya que varios pasos son similares, y no vamos a explicarlos de nuevo aquí.

Puedes descargar este proyecto ejemplo más abajo. Recordamos que toda esta documentación proviene de nuestro curso Desarrollo de Aplicaciones Android (con Android Studio)

Añadir video al proyecto Android

Ya explicamos en el tutorial anterior que necesitamos añadir a nuestro proyecto los ficheros de audio o video que queramos reproducir. Estos se ubicaran en la carpeta res/raw, que deberemos crear si no existe. En el proyecto ejemplo que puedes descargar abajo se trata del video «martian_wrinkle» en formato mp4.

Reproducir el video

Al igual que en el proyecto de inserción de audio, implementaremos un sencillo reproductor de video, creando una interfaz con 3 botones.. Puedes ver el resultado del proyecto aquí (en este caso utilizamos otro video de ejemplo distinto al que tienes en la descarga del proyecto):

Para la reproducción de video necesitaremos, además de una clase que controle dicha reproducción, un elemento visual que añadir a nuestra interfaz de usuario. En este caso la clase VideoView nos proporciona ambos componentes.

Vamos a modificar nuestro ejemplo anterior añadiendo un VideoView a los botones, quedando el layout como sigue:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.academiaandroid.demomultimedia.MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        >

        <Button
            android:text="PLAY"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/buttonPlay"
            android:layout_alignParentBottom="true"
            android:layout_toLeftOf="@+id/buttonPause"
            android:layout_toStartOf="@+id/buttonPause"
            android:layout_marginBottom="20dp" />

        <Button
            android:text="PAUSE"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/buttonPause"
            android:layout_alignBaseline="@+id/buttonPlay"
            android:layout_alignBottom="@+id/buttonPlay"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp"/>

        <Button
            android:text="STOP"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/buttonStop"
            android:layout_alignBaseline="@+id/buttonPause"
            android:layout_alignBottom="@+id/buttonPause"
            android:layout_toRightOf="@+id/buttonPause"
            android:layout_toEndOf="@+id/buttonPause"
             />

        <VideoView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/videoView" />

    </LinearLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.academiaandroid.demomultimedia.MainActivity">

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

<Button

android:text="PLAY"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/buttonPlay"

android:layout_alignParentBottom="true"

android:layout_toLeftOf="@+id/buttonPause"

android:layout_toStartOf="@+id/buttonPause"

android:layout_marginBottom="20dp" />

<Button

android:text="PAUSE"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/buttonPause"

android:layout_alignBaseline="@+id/buttonPlay"

android:layout_alignBottom="@+id/buttonPlay"

android:layout_centerHorizontal="true"

android:layout_marginBottom="20dp"/>

<Button

android:text="STOP"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/buttonStop"

android:layout_alignBaseline="@+id/buttonPause"

android:layout_alignBottom="@+id/buttonPause"

android:layout_toRightOf="@+id/buttonPause"

android:layout_toEndOf="@+id/buttonPause"

<VideoView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/videoView" />

</LinearLayout>

</RelativeLayout>

Ahora, modificaremos el código fuente de la aplicación para la reproducción de video:

package com.academiaandroid.demomultimedia;

import android.app.Activity;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.VideoView;

import java.io.IOException;

public class MainActivity extends Activity implements View.OnClickListener{
    private Button btnPlay;
    private Button btnPause;
    private Button btnStop;
    private VideoView video;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Inicializamos la clase VideoView asociandole el fichero de Video

        video=(VideoView) findViewById(R.id.videoView);
        String path = "android.resource://" + getPackageName() + "/" + R.raw.martian_wrinkle;
        video.setVideoURI(Uri.parse(path));

        //Obtenemos los tres botones de la interfaz
        btnPlay= (Button)findViewById(R.id.buttonPlay);
        btnStop= (Button)findViewById(R.id.buttonStop);
        btnPause= (Button)findViewById(R.id.buttonPause);

        //Y les asignamos el controlador de eventos
        btnPlay.setOnClickListener(this);
        btnStop.setOnClickListener(this);
        btnPause.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //Comprobamos el identificador del boton que ha llamado al evento para ver
        //cual de los botones es y ejecutar la acción correspondiente
        switch(v.getId()){
            case R.id.buttonPlay:
                //Iniciamos el video
                video.start();
                break;
            case R.id.buttonPause:
                //Pausamos el video
                video.pause();
                break;
            case R.id.buttonStop:
                //Paramos el video y volvemos a inicializar

                video.stopPlayback();
                video.seekTo(0);


                break;

        }
    }
}

package com.academiaandroid.demomultimedia;

import android.app.Activity;

import android.media.MediaPlayer;

import android.net.Uri;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.VideoView;

import java.io.IOException;

public class MainActivity extends Activity implements View.OnClickListener{

private Button btnPlay;

private Button btnPause;

private Button btnStop;

private VideoView video;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Inicializamos la clase VideoView asociandole el fichero de Video

video=(VideoView) findViewById(R.id.videoView);

String path = "android.resource://" + getPackageName() + "/" + R.raw.martian_wrinkle;

video.setVideoURI(Uri.parse(path));

//Obtenemos los tres botones de la interfaz

btnPlay= (Button)findViewById(R.id.buttonPlay);

btnStop= (Button)findViewById(R.id.buttonStop);

btnPause= (Button)findViewById(R.id.buttonPause);

//Y les asignamos el controlador de eventos

btnPlay.setOnClickListener(this);

btnStop.setOnClickListener(this);

btnPause.setOnClickListener(this);

}

@Override

public void onClick(View v) {

//Comprobamos el identificador del boton que ha llamado al evento para ver

//cual de los botones es y ejecutar la acción correspondiente

switch(v.getId()){

case R.id.buttonPlay:

//Iniciamos el video

video.start();

break;

case R.id.buttonPause:

//Pausamos el video

video.pause();

break;

case R.id.buttonStop:

//Paramos el video y volvemos a inicializar

video.stopPlayback();

video.seekTo(0);

break;

}

Como vemos el funcionamiento es bastante similar salvo pequeñas diferencias como la forma de asociar el fichero, en este caso utilizamos la función setVideoURI con la que podemos asignar tanto videos alojados en los recursos de la aplicación como urls de videos disponibles en Internet.

Descarga del proyecto

Aquí puedes descargar el proyecto completo:

Download

Créditos: el video incluido en el proyecto descargable es «Wrinkle Ridge» (formación tectónica en la superficie de Marte), creado por NASA/JPL/University of Arizona (dominio público).

Multimedia

Añadir video al proyecto Android

Reproducir el video

Descarga del proyecto

Share This

Academia Android

Entradas relacionadas