Layouts mit benutzerdefinierten VideoCompositorSettings definieren

Nutzer möchten möglicherweise mehrere Media-Assets zusammen bearbeiten, sodass mehr als ein Media-Element gleichzeitig im endgültigen Video zu sehen ist. Dazu gehört auch das Anordnen von Elementen in Layouts wie Bild-in-Bild, nebeneinander oder in einem Raster. Hier einige Beispiele für solche Projekte:

Video mit Bild-im-Bild-Layout
Media-Elemente in einem Bild-in-Bild-Layout angeordnet.
Video mit Rasterlayout
Medienelemente in einem 2x2-Rasterlayout angeordnet.

Eine Implementierung dieser Layouts finden Sie in der Demo-App für die Komposition.

VideoCompositorSettings implementieren

Die VideoCompositorSettings Schnittstelle enthält zwei Methoden:

Präsentation einer Sequenz mit OverlaySettings konfigurieren

Ihre Implementierung von getOverlaySettings() sollte für jede Sequenz in Ihrem Projekt eine Instanz der OverlaySettings Schnittstelle zurückgeben. Der Parameter inputId gibt an, auf welche Sequenz die Einstellungen angewendet werden. Zum Erstellen einer Instanz können Sie die in Media3 enthaltene Klasse StaticOverlaySettings class verwenden. Eine vollständige Liste der Konfigurationsoptionen finden Sie auf der StaticOverlaySettings.Builder Referenzseite . Dazu gehören visuelle Änderungen wie Alphatransparenz und HDR-Helligkeit, Positionsänderungen wie Anker punkt und Position im Frame sowie Transformationen wie Drehung und Skalierung.

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()
  }
}

Mit dem Parameter presentationTimeUs der Methode getOverlaySettings() können Sie diese Einstellungen basierend auf der Position des Videos ändern, wie im Beispiel für das bewegte Bild-in-Bild-Layout weiter oben auf dieser Seite gezeigt.

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()
  }
}

Feedback

Wenn Sie Feedback oder Funktionsanfragen zu Anwendungsfällen für die Videokomposition haben, melden Sie ein Problem im Media3-GitHub-Repository.