¿Cómo crear un reproductor de video dinámico en Android con Firebase Realtime Database?

La mayoría de las aplicaciones usan el reproductor de video para mostrar tantos videos dentro de su aplicación. Entonces, para reproducir el video, la aplicación reproduce el video desde su URL de video. Pero, ¿qué pasa si queremos actualizar ese video en tiempo real? Entonces, en ese caso, tenemos que actualizar nuestra base de datos y luego tenemos que actualizar nuestro APK. Así que esta no es una manera eficiente de hacerlo. En este artículo, veremos la implementación del reproductor de video dinámico en Android usando Firebase Realtime Database .

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que reproduciremos un video en un ExoPlayer y cargaremos un video dentro de nuestro ExoPlayer desde Firebase. Junto con eso, podremos cambiar nuestro video en tiempo de ejecución. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: conecta tu aplicación a Firebase  

Después de crear un nuevo proyecto. Navegue a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.  

Dentro de esa columna, navegue hasta Firebase Realtime Database. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Firebase Realtime Database a su aplicación. Haga clic en la opción Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase.  

Después de completar este proceso, verá la siguiente pantalla.  

Ahora verifique que su aplicación esté conectada a Firebase o no. Vaya a su archivo build.gradle. Vaya a la aplicación > Gradle Scripts > archivo build.gradle (aplicación) y asegúrese de que la siguiente dependencia se agregue en su sección de dependencias.  

implementación ‘com.google.firebase:firebase-database:19.6.0’

Después de agregar esta dependencia, agregue la dependencia de ExoPlayer en su archivo Gradle.  

Paso 3: agregue la dependencia para ExoPlayer View en el archivo build.gradle

Vaya a la aplicación > Gradle Scripts > archivo build.gradle (aplicación) y agregue la dependencia a continuación. 

// dependencia para exojugador

implementación ‘com.google.android.exoplayer:exoplayer:r2.4.0’

// para soporte básico en exoplayer.

implementación ‘com.google.android.exoplayer:exoplayer-core:r2.4.0’

// por agregar soporte de guión en nuestro exoplayer.

implementación ‘com.google.android.exoplayer:exoplayer-dash:r2.4.0’

// por agregar soporte hls en exoplayer.

implementación ‘com.google.android.exoplayer:exoplayer-hls:r2.4.0’

// para una transmisión fluida de video en nuestro exoplayer.

implementación ‘com.google.android.exoplayer:exoplayer-smoothstreaming:r2.4.0’

// para generar la interfaz de usuario predeterminada de exoplayer

implementación ‘com.google.android.exoplayer:exoplayer-ui:r2.4.0’

Después de agregar esta dependencia, sincronice su proyecto. Ahora nos moveremos hacia nuestra parte XML.  

Paso 4: Agregar permiso para Internet  

Como estamos cargando nuestro video desde Internet, tenemos que agregar permisos para Internet en el archivo Manifiesto. Navegue a la aplicación > archivo AndroidManifest.xml y agregue los siguientes permisos en él.  

<!--Permissions for internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 5: trabajar con el archivo activity_main.xml

actividad_principal.xml actividad_principal.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--Widget for exoplayer view-->
    <com.google.android.exoplayer2.ui.SimpleExoPlayerView
        android:id="@+id/idExoPlayerView"
        android:layout_width="match_parent"
        android:layout_height="500dp" />
  
</RelativeLayout>

Paso 6: trabajar con el archivo MainActivity.java

MainActivity.java MainActivity.java

import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.exoplayer2.ExoPlayerFactory;
import com.google.android.exoplayer2.SimpleExoPlayer;
import com.google.android.exoplayer2.extractor.DefaultExtractorsFactory;
import com.google.android.exoplayer2.extractor.ExtractorsFactory;
import com.google.android.exoplayer2.source.ExtractorMediaSource;
import com.google.android.exoplayer2.source.MediaSource;
import com.google.android.exoplayer2.trackselection.AdaptiveTrackSelection;
import com.google.android.exoplayer2.trackselection.DefaultTrackSelector;
import com.google.android.exoplayer2.trackselection.TrackSelector;
import com.google.android.exoplayer2.ui.SimpleExoPlayerView;
import com.google.android.exoplayer2.upstream.BandwidthMeter;
import com.google.android.exoplayer2.upstream.DefaultBandwidthMeter;
import com.google.android.exoplayer2.upstream.DefaultHttpDataSourceFactory;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a variable for our Firebase Database.
    FirebaseDatabase firebaseDatabase;
      
    // creating a variable for our Database 
    // Reference for Firebase.
    DatabaseReference databaseReference;
      
    // creating a variable for exoplayerview.
    SimpleExoPlayerView exoPlayerView;
      
    // creating a variable for exoplayer
    SimpleExoPlayer exoPlayer;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        exoPlayerView = findViewById(R.id.idExoPlayerView);
          
        // below line is used to get the 
        // instance of our Firebase database.
        firebaseDatabase = FirebaseDatabase.getInstance();
          
        // below line is used to get reference for our database.
        databaseReference = firebaseDatabase.getReference("url");
        getVideoUrl();
    }
  
    private void getVideoUrl() {
        // calling add value event listener method 
        // for getting the values from database.
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                // this method is call to get the 
                // realtime updates in the data.
                // this method is called when the 
                // data is changed in our Firebase console.
                // below line is for getting the data 
                // from snapshot of our database.
                String videoUrl = snapshot.getValue(String.class);
                  
                // after getting the value for our video url 
                // we are passing that value to our
                // initialize exoplayer method to load our video
                initializeExoplayerView(videoUrl);
            }
  
            @Override
            public void onCancelled(@NonNull DatabaseError error) {
                // calling on cancelled method when we receive
                // any error or we are not able to get the data.
                Toast.makeText(MainActivity.this, "Fail to get video url.", Toast.LENGTH_SHORT).show();
            }
        });
    }
  
    private void initializeExoplayerView(String videoURL) {
        try {
            // bandwidthmeter is used for getting default bandwidth
            BandwidthMeter bandwidthMeter = new DefaultBandwidthMeter();
            // track selector is used to navigate between video using a default seeker.
            TrackSelector trackSelector = new DefaultTrackSelector(new AdaptiveTrackSelection.Factory(bandwidthMeter));
              
            // we are adding our track selector to exoplayer.
            exoPlayer = ExoPlayerFactory.newSimpleInstance(this, trackSelector);
             
            // we are parsing a video url and 
            // parsing its video uri.
            Uri videouri = Uri.parse(videoURL);
             
            // we are creating a variable for data source
            // factory and setting its user agent as 'exoplayer_view'
            DefaultHttpDataSourceFactory dataSourceFactory = new DefaultHttpDataSourceFactory("exoplayer_video");
              
            // we are creating a variable for extractor 
            // factory and setting it to default extractor factory.
            ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
              
            // we are creating a media source with above variables 
            // and passing our event handler as null,
            MediaSource mediaSource = new ExtractorMediaSource(videouri, dataSourceFactory, extractorsFactory, null, null);
              
            // inside our exoplayer view 
            // we are setting our player
            exoPlayerView.setPlayer(exoPlayer);
              
            // we are preparing our exoplayer 
            // with media source.
            exoPlayer.prepare(mediaSource);
              
            // we are setting our exoplayer 
            // when it is ready.
            exoPlayer.setPlayWhenReady(true);
        } catch (Exception e) {
            // below line is used for handling our errors.
            Log.e("TAG", "Error : " + e.toString());
        }
    }
}

Paso 7: Agregar URL para video en su Firebase Console 

Para agregar URL de video en Firebase Console. Busque Firebase en su navegador y haga clic en la opción Ir a la consola en la esquina superior derecha, como se muestra en la siguiente captura de pantalla.  

 Después de hacer clic en la opción Ir a la consola, podrá ver su proyecto. Haga clic en el nombre de su proyecto de la lista de proyectos disponibles. 

Después de hacer clic en su proyecto. Haga clic en la opción Base de datos en tiempo real en la ventana izquierda.  

Después de hacer clic en esta opción, verá la pantalla en el lado derecho. En esta página, haga clic en la opción Reglas que se encuentra en la barra superior. Verá la siguiente pantalla.  

En este proyecto, estamos agregando nuestras reglas como verdaderas tanto para lectura como para escritura porque no estamos usando ninguna autenticación para verificar a nuestro usuario. Por lo tanto, actualmente lo estamos configurando como verdadero para probar nuestra aplicación. Después de cambiar sus reglas. Haga clic en el botón publicar en la esquina superior derecha y sus reglas se guardarán allí. Ahora vuelva de nuevo a la pestaña Datos. Ahora agregaremos nuestros datos a Firebase manualmente desde el mismo Firebase.

Dentro de la base de datos en tiempo real de Firebase. Navegue a la pestaña Datos. Dentro de esta pestaña en la sección de la base de datos, haga clic en el icono «+». Después de hacer clic en el ícono «+», verá dos campos de entrada que son los campos Nombre y Valor. Dentro del campo Nombre, debe agregar la referencia de su archivo de video, que en nuestro caso es » url «. Y en nuestro campo de valor, debemos agregar la URL de nuestro archivo de video. Después de agregar el valor en este campo. Haga clic en el botón Agregar y sus datos se agregarán a Firebase Console.  

Después de agregar la URL de su video. Ahora ejecute su aplicación y vea el resultado de la aplicación a continuación: 

Producción:

Puede cambiar la URL de su video dinámicamente.