Как создать динамический видеоплеер на Android с базой данных Firebase Realtime?
Большинство приложений используют видеоплеер для отображения большого количества видео внутри своего приложения. Таким образом, для воспроизведения видео приложение воспроизводит видео со своего URL-адреса видео. Но что, если мы хотим обновлять это видео в режиме реального времени. Итак, в этом случае мы должны обновить нашу базу данных, а затем обновить наш APK. Так что это не эффективный способ сделать это. В этой статье мы рассмотрим реализацию динамического видеоплеера в Android с использованием базы данных Firebase Realtime.
Что мы собираемся построить в этой статье?
Мы будем создавать простое приложение, в котором мы будем воспроизводить видео в ExoPlayer, и мы будем загружать видео в наш ExoPlayer из Firebase. Наряду с этим, мы сможем изменять наше видео во время выполнения. Ниже приведен пример видео, чтобы понять, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.
Пошаговая реализация
Шаг 1. Создайте новый проект
Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что выберите Java в качестве языка программирования.
Шаг 2. Подключите приложение к Firebase
После создания нового проекта. Перейдите к параметру Инструменты на верхней панели. Внутри этого нажмите Firebase. После нажатия на Firebase вы можете увидеть правый столбец, упомянутый ниже на снимке экрана.
Внутри этого столбца перейдите к базе данных Firebase Realtime. Нажмите на эту опцию, и вы увидите две опции: Подключить приложение к Firebase и Добавить базу данных Firebase Realtime в свое приложение. Нажмите на опцию Подключить сейчас, и ваше приложение будет подключено к Firebase. После этого нажмите на второй вариант, и теперь ваше приложение подключено к Firebase.
После завершения этого процесса вы увидите экран ниже.
Теперь убедитесь, что ваше приложение подключено к Firebase или нет. Перейдите в свой файл build.gradle. Перейдите в файл app> Gradle Scripts> build.gradle (app) и убедитесь, что указанная ниже зависимость добавлена в ваш раздел зависимостей.
implementation ‘com.google.firebase:firebase-database:19.6.0’
После добавления этой зависимости добавьте зависимость ExoPlayer в свой файл Gradle.
Шаг 3. Добавьте зависимость для ExoPlayer View в файл build.gradle
Перейдите в приложение> Сценарии Gradle> файл build.gradle (приложение) и добавьте в него зависимость ниже.
// dependancy for exoplayer
implementation ‘com.google.android.exoplayer:exoplayer:r2.4.0’
// for core support in exoplayer.
implementation ‘com.google.android.exoplayer:exoplayer-core:r2.4.0’
// for adding dash support in our exoplayer.
implementation ‘com.google.android.exoplayer:exoplayer-dash:r2.4.0’
// for adding hls support in exoplayer.
implementation ‘com.google.android.exoplayer:exoplayer-hls:r2.4.0’
// for smooth streaming of video in our exoplayer.
implementation ‘com.google.android.exoplayer:exoplayer-smoothstreaming:r2.4.0’
// for generating default ui of exoplayer
implementation ‘com.google.android.exoplayer:exoplayer-ui:r2.4.0’
После добавления этой зависимости синхронизируйте свой проект. Теперь перейдем к нашей XML-части.
Шаг 4: Добавление разрешения для Интернета
Поскольку мы загружаем наше видео из Интернета, мы должны добавить разрешения для Интернета в файле манифеста. Перейдите в приложение> файл AndroidManifest.xml и добавьте в него указанные ниже разрешения.
XML
<!--Permissions for internet-->< uses-permission android:name = "android.permission.INTERNET" />< uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" /> |
Шаг 5: Работа с файлом activity_main.xml
Перейдите в файл activity_main.xml и обратитесь к следующему коду. Ниже приведен код файла activity_main.xml.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< RelativeLayout 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 > |
Шаг 6: Работа с файлом 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." состоянии "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()); } }} |
Шаг 7. Добавление URL-адреса для видео в Firebase Console
Для добавления URL-адреса видео в Firebase Console. Найдите Firebase в своем браузере и нажмите кнопку «Перейти в консоль» в правом верхнем углу, как показано на снимке экрана ниже.
После нажатия на опцию «Перейти в консоль» вы увидите свой проект. Щелкните название своего проекта в доступном списке проектов.
После нажатия на ваш проект. Нажмите на опцию Realtime Database в левом окне.
После нажатия на эту опцию вы увидите экран с правой стороны. На этой странице нажмите на опцию Rules, которая присутствует на верхней панели. Вы увидите экран ниже.
В этом проекте мы добавляем наши правила как истинные как для чтения, так и для записи, потому что мы не используем никакой аутентификации для проверки нашего пользователя. Итак, в настоящее время мы устанавливаем для него значение true, чтобы протестировать наше приложение. После изменения ваших правил. Нажмите кнопку публикации в правом верхнем углу, и ваши правила будут сохранены там. Теперь снова вернитесь во вкладку Data. Теперь мы будем добавлять наши данные в Firebase вручную из самой Firebase.
Внутри базы данных Firebase Realtime. Перейдите на вкладку "Данные". Внутри этой вкладки в разделе базы данных щелкните значок «+». После нажатия на значок «+» вы увидите два поля ввода, которые являются полями «Имя» и «Значение». В поле «Имя» вы должны добавить ссылку на ваш видеофайл, в нашем случае это « url ». И в нашем поле значения мы должны добавить URL-адрес нашего видеофайла. После добавления значения в это поле. Нажмите кнопку «Добавить», и ваши данные будут добавлены в Firebase Console.
После добавления URL-адреса вашего видео. Теперь запустите ваше приложение и посмотрите результат работы приложения ниже:
Выход:
Вы можете динамически изменять URL-адрес вашего видео.