المدونة

تشغيل ملفات الفيديو باستخدام 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"/>

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

overriding layoutfiles

سوف نقوم باستخدام 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
exoplayer Style view exoplayer view

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

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

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

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>

exoplayer custom player view layout

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

لاحظ اننا قمنا باستخدام معرف @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"
     ...
     ...
/>

وبذلك نكون انتهينا

الصورة الاولى الصورة الثانية
exoplayer custom view1 exoplayer custom view2

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

player.release()

الكود متوفر هنا سوف تجد شرح الطرق الثلاث مع اضافات صغيرة

يمكنك استكمال القراءة على موقع المكتبة