การเริ่มต้นใช้งาน CastPlayer

CastPlayer คือการใช้งาน Player ของ Jetpack Media3 ที่รองรับทั้ง การเล่นในเครื่องและการแคสต์ไปยังอุปกรณ์ที่พร้อมใช้งาน Cast จากระยะไกล CastPlayer ช่วยให้การเพิ่มฟังก์ชันการแคสต์ลงในแอปเป็นเรื่องง่ายและมีฟีเจอร์มากมายที่ช่วยให้ สลับระหว่างการเล่นในเครื่องและการเล่นจากระยะไกลได้อย่างราบรื่น คู่มือนี้แสดงวิธี ผสานรวม CastPlayer เข้ากับแอปสื่อ

หากต้องการผสานรวม Cast กับแพลตฟอร์มอื่นๆ โปรดดู Cast SDK

เพิ่ม CastPlayer เป็นการขึ้นต่อกัน

หากต้องการเริ่มใช้ CastPlayer ให้เพิ่มการอ้างอิง AndroidX Media3 และ CastPlayer ที่คุณต้องการในไฟล์ build.gradle ของโมดูลแอป

Kotlin

implementation("androidx.media3:media3-exoplayer:1.9.0-alpha01")
implementation("androidx.media3:media3-ui:1.9.0-alpha01")
implementation("androidx.media3:media3-session:1.9.0-alpha01")
implementation("androidx.media3:media3-cast:1.9.0-alpha01")

Groovy

implementation "androidx.media3:media3-exoplayer:1.9.0-alpha01"
implementation "androidx.media3:media3-ui:1.9.0-alpha01"
implementation "androidx.media3:media3-session:1.9.0-alpha01"
implementation "androidx.media3:media3-cast:1.9.0-alpha01"

โปรดอ่านหมายเหตุประจำรุ่นของ Jetpack Media เพื่อค้นหารุ่นอัลฟ่าล่าสุด เพื่อให้คุณผสานรวม CastPlayer เข้ากับแอปได้ โมดูลทั้งหมดต้องเป็นเวอร์ชันเดียวกัน

ดูข้อมูลเพิ่มเติมเกี่ยวกับโมดูลไลบรารีที่พร้อมใช้งานได้ที่ หน้า AndroidX Media3 ของ Google Maven

กำหนดค่า CastPlayer

หากต้องการกำหนดค่า CastPlayer ให้อัปเดตไฟล์ AndroidManifest.xml ด้วย ผู้ให้บริการตัวเลือก

ผู้ให้บริการตัวเลือก

CastPlayer ต้องมีผู้ให้บริการตัวเลือกเพื่อกำหนดค่าลักษณะการทำงาน สำหรับการตั้งค่าพื้นฐาน คุณสามารถใช้ตัวเลือกเริ่มต้นที่ผู้ให้บริการระบุไว้โดยการเพิ่มตัวเลือกดังกล่าวลงในไฟล์ AndroidManifest.xml ซึ่งจะใช้การตั้งค่าเริ่มต้น รวมถึงแอปพลิเคชันตัวรับเริ่มต้น

<application>
  <meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="androidx.media3.cast.DefaultCastOptionsProvider" />
</application>

หากต้องการปรับแต่งการกำหนดค่า ให้ใช้ OptionsProvider ที่กำหนดเอง ดูวิธีดำเนินการได้ในคำแนะนำเกี่ยวกับ CastOptions

เพิ่มผู้รับสำหรับการโอนสื่อ

การเพิ่ม MediaTransferReceiver ลงในไฟล์ Manifest จะช่วยให้ UI ของระบบ เปลี่ยนเส้นทางสื่อได้โดยไม่ต้องเปิดกิจกรรมของแอป เช่น ผู้ใช้สามารถ เปลี่ยนอุปกรณ์ที่เล่นสื่อของแอปจากการแจ้งเตือนสื่อ

<application>
  <receiver android:name="androidx.mediarouter.media.MediaTransferReceiver" />
</application>

สร้าง CastPlayer

สำหรับการเล่นจากระยะไกลด้วย Cast แอปควรจัดการการเล่นได้แม้ว่าผู้ใช้จะไม่ได้โต้ตอบกับกิจกรรมจากแอป เช่น ผ่านการแจ้งเตือนสื่อของระบบ ด้วยเหตุนี้ คุณจึงควรสร้างอินสแตนซ์ ExoPlayer (สำหรับการเล่นในเครื่อง) และ CastPlayer (สำหรับการเล่นจากระยะไกล) ใน บริการ เช่น MediaSessionService หรือ MediaLibraryService ก่อนอื่น ให้สร้างอินสแตนซ์ ExoPlayer แล้วเมื่อสร้างอินสแตนซ์ CastPlayer ให้ตั้งค่า ExoPlayer เป็นอินสแตนซ์เพลเยอร์ในเครื่อง จากนั้น Media3 จะจัดการการโอนผู้เล่นได้เมื่อเส้นทางการส่งออกเปลี่ยนจากภายในเป็นระยะไกลหรือจากระยะไกลเป็นภายใน

Kotlin

override fun onCreate() {
  super.onCreate()

  val exoPlayer = ExoPlayer.Builder(context).build()
  val castPlayer = CastPlayer.Builder(context)
      .setLocalPlayer(exoPlayer)
      .build()

  mediaSession = MediaSession.Builder(context, castPlayer).build()
}

Java

@Override
public void onCreate() {
  super.onCreate();

  ExoPlayer exoPlayer = new ExoPlayer.Builder(context).build();
  CastPlayer castPlayer = new CastPlayer.Builder(context)
      .setLocalPlayer(exoPlayer)
      .build();

  mediaSession = new MediaSession.Builder(
    /* context= */ context, /* player= */ castPlayer).build();
}

เพิ่มองค์ประกอบ UI

เพิ่ม MediaRouteButton ลงใน UI ของแอปเพื่อให้ผู้ใช้เลือกอุปกรณ์ที่พร้อมใช้งาน Cast ได้ ส่วนนี้จะแสดงวิธีเพิ่มปุ่มและรอรับเหตุการณ์เพื่ออัปเดต UI เมื่อการเล่นสลับระหว่างอุปกรณ์ในพื้นที่และอุปกรณ์ระยะไกล

ตั้งค่า MediaRouteButton

คุณเพิ่ม MediaRouteButton ลงใน UI ของกิจกรรมเพื่อให้ผู้ใช้โต้ตอบได้ 4 วิธี โดยตัวเลือกจะขึ้นอยู่กับลักษณะและการทำงานของ UI สำหรับ กิจกรรมของผู้เล่นที่คุณต้องการ

เพิ่มปุ่มเส้นทางสื่อที่ประกอบได้ลงในเพลเยอร์

คุณเพิ่ม Composable MediaRouteButton ลงใน UI ของเพลเยอร์ได้ ดูข้อมูลเพิ่มเติมได้ที่คู่มือCompose

Kotlin

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.media3.cast.MediaRouteButton

@Composable
fun PlayerComposeView(player: Player, modifier: Modifier = Modifier) {
  var controlsVisible by remember { mutableStateOf(false) }

  Box(
    modifier = modifier.clickable { controlsVisible = true },
    contentAlignment = Alignment.Center,
  ) {
    PlayerSurface(player = player, modifier = modifier)
    AnimatedVisibility(visible = controlsVisible, enter = fadeIn(), exit = fadeOut()) {
      Box(modifier = Modifier.fillMaxSize()) {
        MediaRouteButton(modifier = Modifier.align(Alignment.TopEnd))
        PrimaryControls(player = player, modifier = Modifier.align(Alignment.Center))
      }
    }
  }
}

@Composable
fun PrimaryControls(player: Player, modifier: Modifier = Modifier) {
  ...
}

เพิ่มปุ่มเส้นทางสื่อไปยัง PlayerView

คุณเพิ่ม MediaRouteButton ได้โดยตรงภายใน UI ของ PlayerView controls หลังจากตั้งค่า MediaController เป็นเพลเยอร์สำหรับ PlayerView แล้ว ให้ระบุ MediaRouteButtonViewProvider เพื่อแสดงปุ่มแคสต์ ในเพลเยอร์

Kotlin

override fun onStart() {
  super.onStart()

  playerView.player = mediaController
  playerView.setMediaRouteButtonViewProvider(MediaRouteButtonViewProvider())
}

Java

@Override
public void onStart() {
  super.onStart();

  playerView.setPlayer(mediaController);
  playerView.setMediaRouteButtonViewProvider(new MediaRouteButtonViewProvider());
}

เพิ่มปุ่มเส้นทางสื่อลงในเมนูแถบแอป

วิธีนี้จะตั้งค่าปุ่มเส้นทางสื่อในเมนูแถบแอป คุณต้องอัปเดตทั้งไฟล์ Manifest และ Activity เพื่อแสดงปุ่มสไตล์นี้

<menu xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:id="@+id/media_route_menu_item"
    android:title="@string/media_route_menu_title"
    app:showAsAction="always"
    app:actionProviderClass="androidx.mediarouter.app.MediaRouteActionProvider"/>
</menu>

Kotlin

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    ...
    menuInflater.inflate(R.menu.sample_media_route_button_menu, menu)
    val menuItemFuture: ListenableFuture<MenuItem> =
        MediaRouteButtonFactory.setUpMediaRouteButton(
            context, menu, R.id.media_route_menu_item)
    Futures.addCallback(
        menuItemFuture,
        object : FutureCallback<MenuItem> {
            override fun onSuccess(menuItem: MenuItem?) {
                // Do something with the menu item.
            }

            override fun onFailure(t: Throwable) {
                // Handle the failure.
            }
        },
        executor)
    ...
}

Java

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    ...
    getMenuInflater().inflate(R.menu.sample_media_route_button_menu, menu);
    ListenableFuture<MenuItem> menuItemFuture =
        MediaRouteButtonFactory.setUpMediaRouteButton(
          context, menu, R.id.media_route_menu_item);
    Futures.addCallback(
        menuItemFuture,
        new FutureCallback<MenuItem>() {
          @Override
          public void onSuccess(MenuItem menuItem) {
            // Do something with the menu item.
          }

          @Override
          public void onFailure(Throwable t) {
            // Handle the failure.
          }
        },
        executor);
    ...
}

เพิ่มปุ่มเส้นทางสื่อเป็น View

หรือจะตั้งค่า MediaRouteButton ใน activity layout.xml ก็ได้ หากต้องการตั้งค่า MediaRouteButton ให้เสร็จสมบูรณ์ ให้ใช้ Media3 Cast MediaRouteButtonFactory ในโค้ด Activity

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  findViewById<MediaRouteButton>(R.id.media_route_button)?.also {
    val unused = MediaRouteButtonFactory.setUpMediaRouteButton(context, it)
  }
}

Java

@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    MediaRouteButton button = findViewById(R.id.media_route_button);
    ListenableFuture<Void> setUpFuture =
        MediaRouteButtonFactory.setUpMediaRouteButton(context, button);
}

Listener กิจกรรม

สร้าง Player.Listener ใน Activity เพื่อฟังการเปลี่ยนแปลงตำแหน่งการเล่นสื่อ เมื่อplaybackTypeเปลี่ยนระหว่าง PLAYBACK_TYPE_LOCAL กับ PLAYBACK_TYPE_REMOTE คุณจะปรับ UI ได้ตามต้องการ เพื่อป้องกันการรั่วไหลของหน่วยความจำ และจำกัดกิจกรรมของ Listener เฉพาะเมื่อแอปของคุณปรากฏเท่านั้น ให้ลงทะเบียน Listener ใน onStart และยกเลิกการลงทะเบียนใน onStop

Kotlin

import androidx.media3.common.DeviceInfo
import androidx.media3.common.Player

private val playerListener: Player.Listener =
  object : Player.Listener {
    override fun onDeviceInfoChanged(deviceInfo: DeviceInfo) {
      if (deviceInfo.playbackType == DeviceInfo.PLAYBACK_TYPE_LOCAL) {
        // Add UI changes for local playback.
      } else if (deviceInfo.playbackType == DeviceInfo.PLAYBACK_TYPE_REMOTE) {
        // Add UI changes for remote playback.
      }
    }
  }

override fun onStart() {
  super.onStart()
  mediaController.addListener(playerListener)
}

override fun onStop() {
  super.onStop()
  mediaController.removeListener(playerListener)
}

Java

import androidx.media3.common.DeviceInfo;
import androidx.media3.common.Player;

private Player.Listener playerListener =
    new Player.Listener() {
      @Override
      public void onDeviceInfoChanged(DeviceInfo deviceInfo) {
        if (deviceInfo.playbackType == DeviceInfo.PLAYBACK_TYPE_LOCAL) {
          // Add UI changes for local playback.
        } else if (deviceInfo.playbackType == DeviceInfo.PLAYBACK_TYPE_REMOTE) {
          // Add UI changes for remote playback.
        }
      }
    };

@Override
protected void onStart() {
  super.onStart();
  mediaController.addListener(playerListener);
}

@Override
protected void onStop() {
  super.onStop();
  mediaController.removeListener(playerListener);
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการฟังและการตอบสนองต่อเหตุการณ์การเล่นได้ในคู่มือเหตุการณ์ของเพลเยอร์