تشغيل ملفات الفيديو باستخدام ExoPlayer

اذا كانت هذه اول مرة لك في استخدام اكسو , قم بمراجعة المقال السابق

السلام عليكم

في المقال السابق قمت بشرح طريقة الاستخدام الاسياسية ل اكسو مع عمل مثال صغير, وبناء على ذلك المقال سوف اقوم اليوم بشرح كيفية تشغيل ملفات فيديو من عدة انوع.

سوف بالبدء باضافة المكتبة:

implementation 'com.google.android.exoplayer:exoplayer:2.15.0'

او يمكننا استخدام

implementation 'com.google.android.exoplayer:exoplayer-ui:2.15.0'
implementation 'com.google.android.exoplayer:exoplayer-core:2.15.0'

اذا لم ترد باستخدام باقي خواص المكتبة ميزة اضافية ايضا هي صغر حجم المكتبة بهذه الطريقة

تاكد من اضافة صلاحية الانترنت الى AndroidManifest.xml لاننا سوف نقوم بتشغل ملف على الانترنت

<uses-permission android:name="android.permission.INTERNET"/>

واجهة المستخدم

سوف نقوم باستخدام View جاهز من المكتبة تحتوى على الخواص الاساسية

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/playerView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

سوف يقوم PlayerView بعرض الفيديو وايضا عرض تحكمات من الفيديو باستخدام PlayerControlView

الكود

سوف نقوم بانشاء متغير المشغل

val player = SimpleExoPlayer.Builder(this)
    .build()

بعدها نحتاج ان نمرر المشغل الى الواجهة

val playerView = findViewById<PlayerView>(R.id.playerView)
playerView.setPlayer(player)

هذا كل شيئ.

الان نحتاج الى اضافة ملف التشغيل

player.addMediaItem(MediaItem.fromUri("URL"))

الخطوة الاخيرة

هي تجهيز المشغل والبدء في التشغيل

player.prepare()
player.playWhenReady = true

هذه كل الكود المطلوب لتشغيل الفيديو

val player = SimpleExoPlayer.Builder(this)
    .build()
val playerView = findViewById<PlayerView>(R.id.playerView)
playerView.player = player
player.addMediaItem(MediaItem.fromUri("https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4"))
player.prepare()
player.playWhenReady = true

الان سوف نقوم بتشغيل المشروع

خواص اضافية:

هنالك خواص اضافية تم بعض تعطيلها ولكن يمكنك تفعليها مثل

show_shuffle_button اظهار خاصية خلط قائمة التشغيل , بمعنى انه لا يتم تشغيل قائمة التشغيل بالتوالي ولكن عشوائياً
show_subtitle_button اظهار زر تفعيل الترجمة , اذا تم اضافة ملف الترجمة
show_fastforward_button اظهار زر تقديم التشغيل
show_rewind_button اظهار زر ارجاع التشغيل

وخواص اخرى .

ما بعد ال `PlayerView`

اذا اردت تغيير شكل المشغل فان المكتبة توفر شكلين من المشغلات

StylePlayerView	PlayerView
`com.google.android.exoplayer2.ui.StyledPlayerView`	`com.google.android.exoplayer2.ui.PlayerView`

طريقة الاستخدام متشابه تماما, اما الشكل العام فيه بعض الاختلافات.

ماذا ان كانت كل هذه الاشكال لا تناسبك ؟

الحل بسيط جدا , لدينا امكانية تعريف شكل مخصص

1- سوف نقوم اولا بتصميم شكل الواجهة المخصصة

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


        <ImageButton android:id="@id/exo_play"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#CC000000"
            style="@style/ExoMediaButton.Play"/>

        <ImageButton android:id="@id/exo_pause"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#CC000000"
            style="@style/ExoMediaButton.Pause"/>

</FrameLayout>

يحتوى على زرين فقط , تشغيل و ايقاف

لاحظ اننا قمنا باستخدام معرف @id/exo_play بدون علامة + وهذا يعني اننا سوف نستخدم معرفات موجودة مسبقا معرفة من المكتبة , بهذه الطريقة يستطيع المشغل ايجاد الازرار

2- تمرير اسم الواجهة لل PlayerView او StyledPlayerView في controller_layout_id

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/playerView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:controller_layout_id="@layout/custom_player_view"
     ...
     ...
/>