Menentukan tata letak dengan VideoCompositorSettings kustom

Pengguna mungkin ingin mengedit beberapa aset media secara bersamaan sehingga lebih dari satu item media muncul secara bersamaan di video akhir. Hal ini mencakup pengaturan item dalam tata letak seperti gambar dalam gambar, berdampingan, atau petak. Berikut beberapa contoh project tersebut:

Video dengan tata letak picture-in-picture
Item media yang disusun dalam tata letak gambar dalam gambar.
Video dengan tata letak petak
Item media yang disusun dalam tata letak petak 2x2.

Anda dapat menjelajahi penerapan tata letak ini di aplikasi demo Komposisi.

Mengimplementasikan VideoCompositorSettings

Antarmuka VideoCompositorSettings berisi 2 metode:

Mengonfigurasi presentasi urutan dengan OverlaySettings

Implementasi getOverlaySettings() Anda harus menampilkan instance antarmuka OverlaySettings untuk setiap urutan dalam project Anda. Parameter inputId mengidentifikasi urutan mana yang akan diterapkan setelannya. Untuk membuat instance, Anda dapat menggunakan StaticOverlaySettings class yang disertakan dalam Media3. Lihat halaman referensi StaticOverlaySettings.Builder untuk mengetahui daftar lengkap opsi konfigurasi, yang mencakup modifikasi visual seperti transparansi alfa dan luminansi HDR, modifikasi posisi seperti titik anchor dan lokasi dalam frame, serta transformasi seperti rotasi dan skala.

override fun getOverlaySettings(inputId: Int, presentationTimeUs: Long): OverlaySettings {
  return when (inputId) {
    // Position the first sequence in the top-left
    0 -> {
      StaticOverlaySettings.Builder()
        // Scale the video down to 1/4th the size of the frame
        .setScale(0.5f, 0.5f)
        // Anchor the sequence in the middle of frame
        .setOverlayFrameAnchor(0f, 0f)
        // Position the video in the top-left section of the frame
        .setBackgroundFrameAnchor(-0.5f, 0.5f)
        .build()
    }
    // Add more cases for remaining input sequences
    else -> StaticOverlaySettings.Builder().build()
  }
}

Dengan menggunakan parameter presentationTimeUs dari metode getOverlaySettings(), Anda dapat mengubah setelan ini berdasarkan posisi video, seperti yang ditunjukkan oleh contoh gambar dalam gambar yang bergerak di halaman ini.

override fun getOverlaySettings(inputId: Int, presentationTimeUs: Long): OverlaySettings {
  return if (inputId == 0) {
    // Use the first sequence as the overlay
    val cycleRadians = 2 * PI * (presentationTimeUs.toDouble() / cycleTimeUs)
    StaticOverlaySettings.Builder()
      // Scale the overlay down
      .setScale(0.35f, 0.35f)
      // Anchor the overlay in the top-middle of the frame
      .setOverlayFrameAnchor(0f, 1f)
      // Move the overlay over time
      .setBackgroundFrameAnchor(sin(cycleRadians).toFloat() * 0.5f, -0.2f)
      // Rotate the overlay over time
      .setRotationDegrees(cos(cycleRadians).toFloat() * -10f)
      .build()
  } else {
    // Present the second sequence in the background as normal
    StaticOverlaySettings.Builder().build()
  }
}

Masukan

Jika Anda memiliki masukan atau permintaan fitur untuk kasus penggunaan komposisi video, ajukan masalah di repositori GitHub Media3.