Material3 Compose

ไลบรารี media3-ui-compose-material3 มี Player Composable ที่แสดงตัวควบคุมวิดีโอเพลเยอร์ แถบความคืบหน้า และเนื้อหาสื่อปัจจุบัน โดยจะจัดการทั้งการจัดการสถานะและการจัดรูปแบบ Material3 ภายใน ดูข้อมูลเพิ่มเติมเกี่ยวกับไลบรารีที่ควรใช้ได้ที่ภาพรวมของ Media3 Compose

// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}

// You can rearrange the composables into a layout that suits your needs
@Composable
fun PlayerProgressControlsLeftAligned(player: Player) {
  Row {
    PositionAndDurationText(player)
    ProgressSlider(player)
  }
}

@Composable
fun PlayerProgressControlsCenterAligned(player: Player) {
  Row {
    PositionText(player)
    ProgressSlider(player)
    DurationText(player)
  }
}

ปรับแต่งคอมโพเนนต์ Material3

แม้ว่า media3-ui-compose-material3 จะมีคอมโพเนนต์ที่เป็นไปตามการออกแบบ Material3 แต่คุณก็ยังคงควบคุมการกำหนดธีมได้อย่างเต็มที่ คุณสามารถปรับแต่งสีแบบกำหนดเอง ตัวพิมพ์ และรูปร่างได้โดยรวม UI ของเพลเยอร์ไว้ใน MaterialTheme

เช่น หากต้องการเปลี่ยนสีของ PlayPauseButton คุณสามารถระบุ colorScheme ที่กำหนดเองได้ ดังนี้

MaterialTheme(
  colorScheme =
    lightColorScheme(
      primary = Color.Red, // Change the primary color for the button
      onPrimary = Color.White,
    )
) {
  // The PlayPauseButton will now use the custom colors
  PlayPauseButton(player)
}

คอมโพเนนต์ Material3 ที่พร้อมใช้งาน

ไลบรารี media3-ui-compose-material3 มีชุด Composable ที่สร้างไว้ล่วงหน้าสำหรับตัวควบคุมวิดีโอเพลเยอร์ทั่วไป ตัวอย่างคอมโพเนนต์ที่คุณใช้ในแอปได้โดยตรงมีดังนี้

ส่วนประกอบ คำอธิบาย
Player เพลเยอร์ที่มีตัวควบคุม แถบความคืบหน้า คำบรรยาย และเฟรมเนื้อหาสำหรับวิดีโอหรืออาร์ตเวิร์ก
PlayPauseButton ปุ่มที่สลับระหว่างเล่นและหยุดชั่วคราว และแสดงสถานะการบัฟเฟอร์ เล่นซ้ำ และลองอีกครั้ง
SeekBackButton ปุ่มสำหรับกรอกลับตามจำนวนที่กำหนด
SeekForwardButton ปุ่มเพื่อกรอไปข้างหน้าตามระยะเวลาที่กำหนด
NextButton ปุ่มสำหรับกรอไปยังรายการสื่อถัดไป
PreviousButton ปุ่มสำหรับกรอไปยังรายการสื่อก่อนหน้า
RepeatButton ปุ่มสำหรับสลับโหมดเล่นซ้ำ
ShuffleButton ปุ่มสำหรับเปิด/ปิดโหมดสุ่มเพลง
MuteButton ปุ่มสำหรับปิดและเปิดเสียงเพลเยอร์
LiveButton ปุ่มที่ระบุว่าการเล่นไลฟ์สดอยู่ที่จุดถ่ายทอดสดหรือไม่ และจะกรอไปยังจุดถ่ายทอดสดเมื่อแตะ
PositionAndDurationText ข้อความที่ประกอบกันได้ซึ่งแสดงตำแหน่งปัจจุบันและระยะเวลาทั้งหมด
PositionText Text Composable ที่แสดงตำแหน่งปัจจุบัน
DurationText Composable ข้อความที่แสดงระยะเวลาทั้งหมด
RemainingDurationText Composable ข้อความที่แสดงระยะเวลาที่เหลือ
ProgressSlider แถบเลื่อนที่แสดงความคืบหน้าในการเล่นและอนุญาตให้ผู้ใช้กรอวิดีโอได้
BufferingIndicator ตัวบอกสถานะความคืบหน้าที่แสดงขณะที่โปรแกรมเล่นกำลังบัฟเฟอร์

โปรดทราบว่ายังมีกรณีอื่นๆ นอกเหนือจากนี้ โปรดดูคอมโพเนนต์ทั้งหมดที่มีในเอกสารอ้างอิง API ของไลบรารี

Composable ที่สร้างไว้ล่วงหน้าอีก 2 รายการที่คุณอาจต้องใช้จะเกี่ยวข้องกับการจัดการแพลตฟอร์มและอยู่ในโมดูล media3-ui-compose เนื่องจากไม่มีการกำหนดธีม Material

ส่วนประกอบ คำอธิบาย
ContentFrame แพลตฟอร์มสำหรับเนื้อหาสื่อที่จัดการการจัดการสัดส่วนภาพ การปรับขนาด ชัตเตอร์ อาร์ตเวิร์ก และช่องคำบรรยาย
PlayerSurface พื้นผิวแบบ Raw ซึ่งรวม SurfaceView และ TextureView ไว้ใน AndroidView